Element UI框架中巧用树选择器的实现


Posted in Javascript onDecember 12, 2018

本文介绍了Element UI框架中巧用树选择器的实现,分享给大家,顺便给自己留个笔记,具体如下:

Element UI框架中巧用树选择器的实现

介绍

在Element UI框架中有选择器和树形控件,但是没有树形选择器,也就是图上的这种方式的选择器,所以只能自定义选择器的slot。这里介绍的是多选情况,如果是单选则去掉复选框,修改一部分的处理即可。

html部分的代码:

<el-select
  v-model="dataArr"
  :multiple="multiple"
  filterable
  :placeholder="placeholder"
  :disabled="disabled"
  :collapse-tags="multiple"
  @remove-tag="handleTagChange"
  @visible-change="handleOptionHidden"
  class="hi-input">
  <el-option value="0"
    class="hidden">
  </el-option>
  <!--el-tree绑定的数组中children里的key值不能是0-->
  <el-tree
    ref="tree"
    :data="options"
    node-key="key"
    show-checkbox
    :default-checked-keys="selectedData"
    @check="handleCheckChange"
    :props="defaultProps">
  </el-tree>
</el-select>

在el-tree中绑定的值是已选择的key值组成的数组,check绑定的事件函数是为了:

  • 得到现在树选择器上选中的值
  • 过滤undefined、null的值(是为了容错处理) 具体代码如下:
handleCheckChange: function() {
  this.selectedData = this.$refs.tree.getCheckedKeys().filter(_ => _);
}

因为选择器是有label值和key值区分的,所以,每当在el-tree中选中值key值变化时,选择器上绑定的值label值也应该随之变化,所以在watch中监听key值,目的是在el-tree绑定的data中找到当前key值对应的label值 具体代码如下:

watch: {
  selectedData: function(newValue) {
    this.$nextTick(() => { this.dataArr = this.handleDataTransform(newValue, 'key', 'label'); });
  },
},
methods: {
  getNameById(array, value, id, name, multi) {
    let arr = array || [];
    let flag;
    let result = arr.filter(item => {
      return item[id] + '' === value + '';
    });
    if (multi) {
      flag = result.map(item => {
        return item[name];
      });
    } else {
      let obj = result[0];
      flag = name ? obj && obj[name] : obj;
    }
    return flag;
  },
  handleDataTransform: function(source, key, value) {
    return this.options.map(_ => {
      let arr = source.map(item => this.$util.getNameById(
        _.children,
        item,
        key,
        value
      )).filter(item => item);
      return arr;
    }).reduce((acc, cur) => {
      return acc.concat(cur);
    }, []);
  }
}

到这里为止,已经完成了树形控件到选择器的单向绑定,现在处理选择器的值发生改变时,树形控件也变化。因为此时是多选,所以要在remove-tag事件中处理,具体代码如下:

handleTagChange: function() {
  // handleDataTransform已经在之前定义过
  this.selectedData = this.handleDataTransform(this.dataArr, 'label', 'key');
  this.$refs.tree.setCheckedKeys(this.selectedData);
},

此时,这个树形选择器已经完成了~:clap::clap:,但是,我们还可以进一步优化,比如:如果选择后的内容与选择前的内容一样,不再发生请求的处理。 在选择器中绑定的visible-change事件可以处理,思想是:

  • item值为true,即展开下拉框时,把此时的值存储下来,注意:warning::这时候存储下来的值必须放在一个全局变量中,函数内的变量会在每次进入这个函数时初始化,所以在下拉框收起再进来这个函数时,之前存储的值已经没有了。
  • item值为false,即收起下拉框时,判断之前存储下的变量值和当前变量值是否相等,如果不相等才触发数据的更新。 具体代码如下:
handleOptionHidden: function(item) {
  // 处理选中内容没变的情况
  if (item) {
    this.selectedItem = [...this.selectedData];
  } else {
    // this.$util.isEqual()是判断两个数组是否相等函数,网上很多,请自行谷歌
    if (!this.$util.isEqual(this.selectedItem, this.selectedData)) {
      this.handleUpdate(this.selectedData);
    }
  }
    },

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

Javascript 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
微信小程序入门之指南针
Oct 22 Javascript
vue中是怎样监听数组变化的
Oct 24 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 #Javascript
新版小程序登录授权的方法
Dec 12 #Javascript
加快Vue项目的开发速度的方法
Dec 12 #Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 #Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 #Javascript
d3绘制基本的柱形图的实现代码
Dec 12 #Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 #Javascript
You might like
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Flask配置Cors跨域的实现
2019/07/12 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
餐厅经理岗位职责范本
2014/02/17 职场文书
教学评估实施方案
2014/03/16 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
邀请书格式范文
2015/02/02 职场文书
中班上学期个人总结
2015/02/12 职场文书
培训计划通知
2015/07/15 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
python脚本框架webpy模板控制结构
2021/11/20 Python
python playwright 自动等待和断言详解
2021/11/27 Python