About the method of obtaining key values ​​in Vue tree structure

This article mainly introduces examples of methods for obtaining key values ​​in the Vue tree structure. The content is quite good. I will share it with you now and give it as a reference.

This article introduces an example of the method of obtaining key values ​​​​from the vue tree structure and shares it with everyone. The details are as follows:

Put the key value file into

Introducing controls

import { getTypeValue } from '@/api/dict/dictValue/index';

Click search to open the pop-up window

<el-form-item label="机构名称" placeholder="请选择机构" prop="orgName">

 <el-input readonly type="text" v-model="form.orgName">

  <el-button slot="append" icon="el-icon-search" @click="openDepartDialog()"></el-button>

 </el-input>

</el-form-item>

Open control events, close control events

openDepartDialog() {

 this.dialogDepartVisible = true

},

closeDepartDialog(depart) {

 console.log(depart)

 this.form.orgName = depart.label

 this.form.code = depart.id

 this.form.departId = depart.id

 this.dialogDepartVisible = false

},

##Close pop-up button

<el-dialog title="选择机构" width="30%" :visible.sync="dialogDepartVisible">

 <depart-selector @closeDepartDialog="closeDepartDialog" ref="departSelector"></depart-selector>

 <span slot="footer" class="dialog-footer">

  <el-button class="filter-item" style="margin-left: 10px;" @click="handlerAddDepart" type="primary" icon="edit">添加</el-button>

 </span>

</el-dialog>

##The above is the entire content of this article , I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

v-for loading local static image method in vue

Vue has multiple methods to implement table headers And the first column fixed method

The above is the detailed content of About the method of obtaining key values ​​in Vue tree structure. For more information, please follow other related articles on the PHP Chinese website!