vue树形结构获取键值的方法示例

更新时间：2018年06月21日 14:33:21 作者：miaomiaotab

这篇文章主要介绍了vue树形结构获取键值的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了vue树形结构获取键值的方法示例，分享给大家，具体如下：

把键值文件放入

引入控件

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

点击搜索，打开弹窗

<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>

打开控件事件，关闭控件事件

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

},

关闭弹窗按钮

<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3源码通过render patch 了解diff
这篇文章主要为大家介绍了Vue3源码系列通过render及patch了解diff原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
$vue中get方法\post方法如何传递数组参数详解$
vue中get方法\post方法如何传递数组参数详解
在前后端交互的时候,有时候需要通过get或者delete传递一个数组给后台,下面下面这篇文章主要给大家介绍了关于vue中get方法\post方法如何传递数组参数,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
vue实现分页的三种效果
这篇文章主要为大家详细介绍了vue实现分页的三种效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
vue 粒子特效的示例代码
本篇文章主要介绍了vue 粒子特效的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
源码浅析Vue3中的组件挂载
这篇文章主要带大家从源码分析一下Vue3中的组件挂载的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
2023-09-09
vue-cli配置flexible过程详解
这篇文章主要介绍了vue-cli配置flexible过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
Vue中的scoped实现原理及穿透方法
这篇文章主要介绍了Vue中的scoped实现原理及穿透方法,本文通过实例文字相结合的形式给大家介绍的非常详细，需要的朋友可以参考下
2018-05-05
如何一步步基于element-ui封装查询组件
这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下
2021-10-10
vue如何通过$router.push传参数
这篇文章主要介绍了vue如何通过$router.push传参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue.js项目模板搭建图文教程
下面小编就为大家带来一篇Vue.js项目模板搭建图文教程。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09