el-select，el-tree支持重复label选择

接之前的代码，之前封装了一个treeselect组件，但是不支持重复label的勾选，移除有问题，这里重新封装了一个，可以直接粘贴复制，根据自己的需要修改

<!--
 * @Author: 
 * @Date: 
 * @LastEditors: Do not edit
 * @LastEditTime: 2024-05-27 15:23:54
 * @Description: 这个组件绑定了id，支持重复的label，但是会多渲染一遍option，通过v-show隐藏，并且需要把数据全部进行处理
 以平铺的形式赋值给select,数据量不大可以使用，数据量大了建议使用treeSelect插件
 * @FilePath: \vue2-simple-front-end-template\src\components\treeSelect\repeatLabelIndex.vue
-->
<template>
  <div>
    <el-select style="width: 100%" v-model="checkedKeys" multiple placeholder="请选择" @remove-tag="handleRemoveTag">
      <el-option v-for="item in transformArr" :key="item.id" :label="item.label" :value="item.id" v-show="false">
      </el-option>
      <div class="select-drown">
        <el-input placeholder="请输入筛选" v-model="filterValue" />
        <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="trees" highlight-current
          :check-strictly="true" :default-checked-keys="checkedKeys" @check="handleCheck"
          :filter-node-method="filterNode" :props="{ children: 'children', label: 'label', id: 'id' }" />
      </div>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paramsQuery: [],
      checkedKeys: [],
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                },
                {
                  id: 11,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        },
        {
          id: 9090,
          label: '一级 1',
        }
      ],
      filterValue: '',
      selectNodesName: [],
      transformArr: [], // 转化后的平铺数组
    };
  },
  watch: {
    // 侦听filterValue 的变化，调用filter的方法
    filterValue(val) {
      this.$refs.trees.filter(val)
    },
  },
  computed: {},
  mounted() {
    // 树状数据转为平铺
    this.transform(this.treeData)
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleRemoveTag(id) {
      var num = -1
      // 通过id删除
      this.paramsQuery.forEach((item, index)=>{
        if(item.id === id){
          num = index
        }
      })
     this.paramsQuery.splice(num, 1)
     this.$refs.trees.setCheckedNodes(this.paramsQuery)
    },
    handleCheck(_, { checkedKeys, checkedNodes }) {
      console.log(checkedKeys, checkedNodes);
      this.checkedKeys = checkedKeys;
      this.paramsQuery = []
      if (Array.isArray(checkedNodes) && checkedNodes.length) {
        checkedNodes.forEach(item => {
          this.paramsQuery.push({
            id: item.id,
            label: item.label
          })
        })
      }
    },
    // 将树状结构转化为平铺
    transform(data){
      if(Array.isArray(data) && data.length){
        for (const item of data) {
          this.transformArr.push(item)
          if(item.children){
            this.transform(item.children)
          }
        }
      }else{
        return
      }
    }
  }
};
</script>

<style>
.select-drown {
  padding: 0px 15px;
}
</style>