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 相关文章推荐
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
python之随机数函数的实现示例
2020/12/30 Python
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
新员工入职感言
2014/02/01 职场文书
博士生导师推荐信
2014/07/08 职场文书
责任书格式范文
2014/07/28 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
质检员工作总结2015
2015/04/25 职场文书
通知格式
2015/04/27 职场文书
销售合作意向书范本
2015/05/08 职场文书
英雄儿女观后感
2015/06/09 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
Python IO文件管理的具体使用
2022/03/20 Python