How do parent-child classes pass values

Posted by feri_soft on Mon, 28 Feb 2022 03:29:47 +0100

[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-cseiymsj-164601479949)( https://img-mid.csdnimg.cn/release/static/image/mid/ask/74460831064618.jpg “#left”)]
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-mpfszz3x-164601479950)( https://img-mid.csdnimg.cn/release/static/image/mid/ask/216908310646193.jpg “#left”)]

Please do not paste the screenshot of the code related to the problem

Parent button

<el-form-item label="Application Administrator" prop="aplMgt">
          <el-input v-model.trim="form.aplMgt" placeholder="Please enter the application administrator" style="width: 200px!important;"  readonly/>
          <el-button

            icon="el-icon-search"
            @click="handleSelectUserDept()"
          >Select user</el-button>
        </el-form-item>

Subclass form

<el-table v-loading="loading" :data="userList" >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="User number" align="center" key="userId" prop="userId"  />
      <el-table-column label="Login account" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
      <el-table-column label="User nickname" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
      <el-table-column label="department" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
      <el-table-column label="phone number" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
      <el-table-column label="state" align="center" key="status" v-if="columns[5].visible">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            :disabled="accessLevel == 1"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="Creation time" align="center" prop="createTime" v-if="columns[6].visible" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>


submitForm() {

      },


###### Operation results and error reporting contents 

###### My solution ideas and tried methods 
Previously, I checked on the Internet to transfer data from the subclass to the parent class $emit This component, but I don't know how to write it. A general idea is to bind a listener after clicking the select user button. If the subclass page is selected and click OK, pass the value of the current line to me, the parent page
###### What I want to achieve

Click a line on the subclass page, and the box of the application administrator on the parent page displays the user nickname button, but it is the user in the background id Value of
# Welcome to the Markdown editor

Hello! This is your first use **Markdown editor ** Welcome page displayed. If you want to learn how to use Markdown editor , You can read this article carefully to understand Markdown Basic grammar knowledge.

## New changes

We're right Markdown The editor has some function expansion and syntax support, in addition to the standard Markdown Editor function, we have added the following new functions to help you blog with it:
 1. **New interface design** ，Will bring a new writing experience;
 2. Set your favorite code highlighting style in the creation center, Markdown **The code slice displays the selected highlight style** Display;
 3. Increased **Picture drag** Function, you can drag the local picture directly to the editing area for direct display;
 4. all-new **KaTeX mathematical formula ** Grammar;
 5. Added support**Gantt chart mermaid grammar[^1]** Function;
 6. Increased **Multi screen editing** Markdown Article function;
 7. Increased **Focus writing mode, preview mode, concise writing mode, left and right area synchronization wheel setting** The function button is located between the editing area and the preview area;
 8. Increased **Checklist** Function.
 [^1]: [mermaid Syntax description](https://mermaidjs.github.io/)

## Function shortcut

revoke:<kbd>Ctrl/Command</kbd> + <kbd>Z</kbd>
Redo:<kbd>Ctrl/Command</kbd> + <kbd>Y</kbd>
Bold:<kbd>Ctrl/Command</kbd> + <kbd>B</kbd>
Italics:<kbd>Ctrl/Command</kbd> + <kbd>I</kbd>
title:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>
Unordered list:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>U</kbd>
Ordered list:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd>
Checklist:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>
Insert code:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>
Insert link:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>
Insert picture:<kbd>Ctrl/Command</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>
Find:<kbd>Ctrl/Command</kbd> + <kbd>F</kbd>
Replace:<kbd>Ctrl/Command</kbd> + <kbd>G</kbd>

## Creating a reasonable title is helpful to the generation of the directory

Direct input once<kbd>#< / KBD > and press < KBD > space < / KBD > to generate a level 1 title.
Enter twice<kbd>#< / KBD > and press < KBD > space < / KBD > to generate a level 2 title.
By analogy, we support level 6 titles. Help to use`TOC`Generate a perfect directory after syntax.

## How to change the style of text

*Emphasis text* _Emphasis text_

**Bold text** __Bold text__

==Tag text==

~~Delete text~~

> Reference text

H~2~O is It's liquid.

2^10^ The result is 1024.

## Insert links and pictures

link: [link](https://www.csdn.net/).

picture: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw)

Picture with size: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw =30x30)

Centered picture: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center)

Centered and sized picture: ![Alt](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9hdmF0YXIuY3Nkbi5uZXQvNy83L0IvMV9yYWxmX2h4MTYzY29tLmpwZw#pic_center =30x30)

Of course, in order to make users more convenient, we have added the image drag function.

## How to insert a beautiful piece of code

go[Blog settings](https://mp.csdn.net/console/configBlog) page, select a code slice highlighting style you like, and the same highlighted 'code slice' is shown below
```javascript
// An highlighted block
var foo = 'bar';

Generate a list that suits you

project
- project
  - project

Item 1
Item 2
Item 3

Plan task
Complete the task

Create a table

A simple table is created as follows:

project	Value
computer	$1600
mobile phone	$12
catheter	$1

The setting content is centered, left and right

Use: ---------: Center
Use: --------- left
Usage -----------: right

First column	Second column	Third column
First column text centered	The text in the second column is on the right	The text in the third column is left

SmartyPants

SmartyPants converts ASCII punctuation characters into "smart" printed punctuation HTML entities. For example:

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	'Isn't this fun?'
Quotes	"Isn't this fun?"	"Isn't this fun?"
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

Create a custom list

Markdown Text-to- HTML conversion tool Authors John Luke

How to create a footnote

A text with footnotes. 1

Comments are also essential

Markdown converts text to HTML.

KaTeX mathematical formula

You can render LaTeX mathematical expressions using KaTeX:

Gamma formula display Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ (n)=(n−1)! ∀ N ∈ N is through Euler integral

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.

You can find more information about LaTeX mathematical expressions here.

New Gantt chart function to enrich your articles

For Gantt chart syntax, refer to here,

UML diagram

UML diagrams can be used for rendering. Mermaid For example, a sequence diagram is generated as follows:

This will produce a flowchart.:

For Mermaid syntax, refer to here,

FLowchart

We will still support the flowchart of flowchart:

For Flowchart syntax, refer to here.

Export and import

export

If you want to try this editor, you can edit it at will in this article. When you have finished writing an article, find the article export in the upper toolbar and generate one md file or html file for local saving.

Import

If you want to load an article you have written md file, you can select the import function in the upper toolbar to import the file with the corresponding extension,
Continue your creation.

Explanation of footnotes ↩︎

Topics: Javascript Front-end

Programmer Think