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


Posted in Javascript onJune 21, 2018

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

把键值文件放入

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

引入控件

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

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

点击搜索,打开弹窗

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

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

打开控件事件,关闭控件事件

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

},

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

关闭弹窗按钮

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue使用jsonp抓取qq音乐数据的方法
Jun 21 #Javascript
Vue 获取数组键名的方法
Jun 21 #Javascript
Taro集成Redux快速上手的方法示例
Jun 21 #Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 #Javascript
JS实现快递单打印功能【推荐】
Jun 21 #Javascript
详解javascript中的babel到底是什么
Jun 21 #Javascript
webpack打包react项目的实现方法
Jun 21 #Javascript
You might like
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
JavaScript中的null和undefined解析
2012/04/14 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
js模糊查询实例分享
2016/12/26 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python小项目之五子棋游戏
2019/12/26 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
8种常用的Python工具
2020/08/05 Python
Python常用外部指令执行代码实例
2020/11/05 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
新郎婚宴答谢词
2014/01/19 职场文书
品德评语大全
2014/05/05 职场文书
材料物理专业求职信
2014/09/01 职场文书
团干部培训班心得体会
2016/01/06 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技