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 相关文章推荐
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
ES6的新特性概览
Mar 10 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
解析js如何获取css样式
Dec 11 Javascript
JS作用域深度解析
Dec 29 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 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 清除网页病毒的方法
2008/12/05 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
简单讲解Python中的闭包
2015/08/11 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
python类中super() 的使用解析
2019/12/19 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
情人节活动策划方案
2014/02/27 职场文书
选秀节目策划方案
2014/06/06 职场文书
月考总结与反思
2015/10/22 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL