• 热门专题

如何在Element UI框架里进行树选择器的使用

作者:whl  发布日期:2018-12-14 08:32:00
  •   很多朋友对于Element UI框架都是一知半解的,对于框架里该如何使用树选择器来实现操作更是不清楚了。为此小编特意查询了资料,整理了比较具有学习价值的部分,下面就给大家进行分享,感兴趣的朋友可以跟着小编一起往下看看。

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

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

      介绍

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

      Html部分的代码:

    html部分的代码

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

      得到现在树选择器上选中的值

      过滤undefined、null的值(是为了容错处理) 具体代码如下:

    过滤undefined、null的值

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

    key值对应的label值

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

    remove-tag事件中处理

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

      Item值为true,即展开下拉框时,把此时的值存储下来,注意:warning::这时候存储下来的值必须放在一个全局变量中,函数内的变量会在每次进入这个函数时初始化,所以在下拉框收起再进来这个函数时,之前存储的值已经没有了。

      Item值为false,即收起下拉框时,判断之前存储下的变量值和当前变量值是否相等,如果不相等才触发数据的更新。 具体代码如下:

    变量值和当前变量值是否相等

      经过对上面这些内容的学习相信大家对于如何进行树选择器的操作都心中有数了吧。如果大家还有什么不明白的可以仔细研究一下上面的代码,试着操作一番你就能够成功操作了。与Element UI框架相关的内容还有很多,小编这里就不一一介绍了,大家可以自行搜索一番。

延伸阅读:

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规