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 相关文章推荐
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
浅析JavaScript动画
Jun 10 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
EsLint入门学习教程
Feb 17 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
原生js实现表格翻页和跳转
Sep 29 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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类Class的概念
2012/06/14 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python异常处理总结
2014/08/15 Python
Python出现segfault错误解决方法
2016/04/16 Python
python生成随机图形验证码详解
2017/11/08 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
小学感恩节活动总结
2015/03/24 职场文书
我的长征观后感
2015/06/09 职场文书
英语投诉信范文
2015/07/03 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL