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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
Ext 今日学习总结
Sep 19 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
Element Input组件分析小结
Oct 11 Javascript
js实现橱窗展示效果
Jan 11 Javascript
Vue js with语句原理及用法解析
Sep 03 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
spyder常用快捷键(分享)
2017/07/19 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
3分钟学会一个Python小技巧
2018/11/23 Python
python装饰器常见使用方法分析
2019/06/26 Python
python几种常用功能实现代码实例
2019/12/25 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Pycharm github配置实现过程图解
2020/10/13 Python
简历里的自我评价
2014/01/31 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
公司表扬稿范文
2015/05/05 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
海上钢琴师观后感
2015/06/03 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技