vue tree-select多个下拉框同一组数据禁用

前言

Vue Treeselect 是一个功能强大、灵活多样的 Vue 树形选择组件，为开发者提供了便捷的方式来实现树状结构的数据选择功能。无论是构建多级级联选择器、实现搜索和远程加载、还是定制化样式和主题，Vue Treeselect 都展现了其出色的表现和丰富的特性。

不论您是初学者还是经验丰富的Vue开发者，本文都将为您提供有用的知识和实用的操作技巧，用于您更好地利用Vue Treeselect来满足项目需求。

背景

项目中需要开发一个，选中一个选项禁用的功能(失去焦点禁用，点击输入框解除禁用并可删除)，多规则选项，最多可增加5组数据(如下图所示)，还得具备筛选功能。这么一个需求，接下来我会先从安装以及案例进行说明，

初始化：

选中

选中后：

多个规则下：

安装

VueTreeselect官网地址：https://vue-treeselect.js.org/

中文地址原来的不能用了，我找到一个新的：www.javasoho.com/vuetreesele…

首先安装插件

npm install --save @riophae/vue-treeselect

接着在所需要的页面中引入组件及样式

组件
<treeselect v-model="value" :multiple="true" :options="options" />

**multiple 是否开启多选**
<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { Treeselect },
    data() {
      return {
        // define the default value
        value: null, 选中的数据
        // define options 源数据
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }

    },
  }
</script>

至此就可以使用了，api的详解还请大家自行去官网查询。接下来，给大家演示背景中，实战应用的需求。

应用

1.引入组件

大家看到背景中的需求以及图片，想必脑中已经勾勒出了整体的步骤，以及编写代码中的一些注意事项，接下来开始编码

<div v-for='(item,index) in datalist' :key='index'>
 <treeselect
                    :multiple="true"  
                    :options="options3"
                    :flat="true"
                    :clearable="false"
                    :sort-value-by="sortValueBy"
                    :normalizer="normalizer1"
                    :default-expand-level="1"
                    placeholder="请选择"
                    v-model="item.alldata"
                    @close="closemenu(item.startRoleId,1)"
                    @open="closemenu(item.startRoleId,2)"
                    no-results-text="没有匹配内容"
                    no-options-text="暂时没有内容"
                    no-children-text="暂时没有内容"
                    :disable-branch-nodes="true"
                    :allow-clearing-disabled="true"
                    :allow-selecting-disabled-descendants="true"
                    :clearOnSelect="true"
                    :limit = '6'
                    :limitText="count => `+${count}`"
                  />
</div>

上面的代码可以多规则添加，数据源来源于一个，这样可以减少一些不必要的代码。

2.属性

下面是使用到的属性：

:limitText=”count => +${count}” 这个我是改写成了只展示数字，总共选择了多少个选项

上面的代码，绑定的选中数据都会放入各自的item.alldata这个数组中。现在整个基础功能已经完善的差不多了。

禁用事件编码

接下来就是实现失焦禁用的功能。
当时我做到这的时候，第一时间去查了api发现他有一个禁用的属性，

然后思路来了，我动态添加设置那不就行嘛，我采用了递归进行处理，然后我调用打开菜单的时候让isDisabled 设置为true,关闭的时候设置为false,其中还要对比数据源中那些之前被选中（还需要禁用掉），代码如下所示：

closemenu(item,a) {
      this.dishFunc3(this.options3（源数据）, item, a==1?true:false);
    },
    
    dishFunc3(menuTreeList, list, disabled) {
      if (menuTreeList.length > 0) {
        menuTreeList.forEach((v, k) => {
          list.forEach((item, index) => {
            if (v.code == item) {
              this.$set(v, "isDisabled", disabled);
            }
          });
          if (v.children) {
            this.dishFunc3(v.children, list, disabled);
          }
        });
        return menuTreeList;
      }
    },

到这整个数据都走通了，还要注意一点的是 回显的时候还需要调用一下closemenu方法不让选中的数据不是禁用状态。

总结

以上所述都是实战遇见的思路和经验，希望能为jym带来启发和帮助。如果jym对 Vue Treeselect 或相关主题有任何疑问或需求，可以随时交流。

参考资料：

官网：
vue-treeselect.js.org/
中文官网：
www.javasoho.com/vuetreesele…

原文链接：https://juejin.cn/post/7343616758325329957 作者：给你俩小拳头