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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
js实现鼠标拖曳效果
Dec 30 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的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
Bootstrap表单布局
2016/07/19 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
vue实现搜索功能
2019/05/28 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python图片合成的示例
2020/11/09 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
会计专业求职信范文
2014/03/16 职场文书
甜品店创业计划书
2014/08/14 职场文书
关于五一放假的通知
2015/08/18 职场文书
2016党员入党决心书
2015/09/22 职场文书
PHP实现两种排课方式
2021/06/26 PHP
python数字转对应中文的方法总结
2021/08/02 Python
mysql查找连续出现n次以上的数字
2022/05/11 MySQL