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 操作Word和Excel的实现代码
Oct 26 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
Angular5中调用第三方js插件的方法
Feb 26 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
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的伪静态模式
2015/12/31 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
input 高级限制级用法
2009/03/26 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
python基础教程项目三之万能的XML
2018/04/02 Python
详解Django 时间与时区设置问题
2019/07/23 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
Python的两道面试题
2013/06/29 面试题
重阳节登山活动方案
2014/02/03 职场文书
中学生自我评价2015
2015/03/03 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
go开发alertmanger实现钉钉报警
2021/07/16 Golang