vue2+element-ui模拟vue3+element-plus的el-tree-select组件，使用el-tree、el-select实现treeSelect组件功能

提示：vue2+element-ui模拟vue3+element-plus的el-tree-select组件

前言

‌‌‌‌‌element-ui没有el-tree-select组件，需要想要一个vue2版本tree-select

一、教程

element-ui文档

二、tree-select组件

<template>
    <div class="tree_select_box T_S_tree_select_box">
        <el-select
          class="T_S_tree_select"
          v-model="selectIds"
          placeholder="请选择"
          no-data-text="暂无内容"
          filterable
          :multiple="type=='multiple'"
          :collapseTags="type=='multiple'"
          :clearable="true"
          @clear="clearNode"
          @change="changeSelect">
          <el-option label="" style="height: auto; padding: 0" value="" >
            <el-tree
              ref="treeSelectRef"
              node-key="id"
              empty-text="暂无内容"
              :data="treeList"
              :default-expand-all="false"
              :multiple="type=='multiple'"
              :showCheckbox="type=='multiple'"
              :expand-on-click-node="type=='multiple'"
              :check-on-click-node="type=='radio'"
              :check-strictly="type=='radio'"
              @check="treeSelect"
              @node-click="clickTreeNode"
            />
          </el-option>
          <el-option v-for="item, index in selectData" :label="item.label" :value="item.id" :key="index" style="display: none;"></el-option>
        </el-select>
    </div>
  </template>
  
  <script>
  export default {
    name:"TreeSelect",
    props:{
      type:{
        type:String,
        default:'multiple'
      },
    },
    data(){
      return{
        selectIds:[],
        selectData:[],
        treeList:[],
      }
    },
    created(){
      this.getTreeList();
    },
    mounted(){
    },
    methods: {
      // 清空
      clearNode(){
        this.$refs.treeSelectRef.setCheckedKeys([])
        if(this.type == 'multiple'){
          this.selectIds = [];
          this.selectData = [];
          this.$emit('changeSelect',[]);
        }else{
          this.$emit('clearNode');
        }
      },
      // 单选点击树结构子节点
      clickTreeNode(data){
        this.selectIds = data.id;
        this.selectData = [data];
        this.$emit('clickTreeNode',data);
      },
      // 删除tag时触发
      changeSelect(){
        if(this.type == 'radio')return
        this.selectData.forEach((node,index)=>{if(this.selectIds.indexOf(node.id)<0){return this.selectData.slice(index,1)}});
        this.$refs.treeSelectRef.setCheckedKeys(this.selectIds);
        this.$emit('changeSelect',this.selectData);
      },
      // 切换节点复选框选中状态
      treeSelect(){
        if(this.type == 'radio')return
        let nodes = this.$refs.treeSelectRef.getCheckedNodes();
        this.selectIds = nodes.map(node=>node.id);
        this.selectData = nodes.map(node=>node);
        this.$emit('changeSelect',this.selectData);
      },
      // 获取数据
      getTreeList(type){
        this.$nextTick(()=>{
            this.treeList = [
                {
                    label:'a',
                    id:'1',
                    name:'a',
                    children:[
                        {
                            label:'a1',
                            id:'11',
                            name:'a1',
                            children:[
                                {
                                    label:'a11',
                                    id:'111',
                                    name:'a11',
                                },
                                {
                                    label:'a12',
                                    id:'112',
                                    name:'a12',
                                },
                            ],
                        },
                        {
                            label:'a2',
                            id:'12',
                            name:'a2',
                            children:[
                                {
                                    label:'a21',
                                    id:'121',
                                    name:'a21',
                                },
                                {
                                    label:'a22',
                                    id:'122',
                                    name:'a22',
                                }

                            ],
                        }
                    ],
                },
                {
                    label:'b',
                    id:'2',
                    name:'b',
                    children:[
                        {
                            label:'b1',
                            id:'21',
                            name:'b1',
                            children:[
                                {
                                    label:'b11',
                                    id:'211',
                                    name:'b11',
                                },
                                {
                                    label:'b12',
                                    id:'212',
                                    name:'b12',
                                },
                            ],
                        },
                        {
                            label:'b2',
                            id:'22',
                            name:'b2',
                            children:[
                                {
                                    label:'b21',
                                    id:'221',
                                    name:'b21',
                                },
                                {
                                    label:'b22',
                                    id:'222',
                                    name:'b22',
                                }

                            ],
                        }
                    ],
                },
                {
                    label:'c',
                    id:'3',
                    name:'c',
                    children:[
                        {
                            label:'c1',
                            id:'31',
                            name:'c1',
                            children:[
                                {
                                    label:'c11',
                                    id:'311',
                                    name:'c11',
                                },
                                {
                                    label:'c12',
                                    id:'312',
                                    name:'c12',
                                },
                            ],
                        },
                        {
                            label:'c2',
                            id:'32',
                            name:'c2',
                            children:[
                                {
                                    label:'c21',
                                    id:'321',
                                    name:'c21',
                                },
                                {
                                    label:'c22',
                                    id:'322',
                                    name:'c22',
                                }

                            ],
                        }
                    ],
                }
            ];
        });
      },
    }
  }
  </script>
  
  <style lang="less">
  .T_S_tree_select_box {
    --theme-color: #1082f5;
    .T_S_tree_select {
      width: 260px;
      line-height: 22px !important;
      position: relative;
      box-sizing: border-box;
      .el-input__inner{
        border-color: #dcdfe6!important;
        height: 32px!important;
        line-height: 32px;
      }
      .el-input.is-focus .el-input__inner{
        border-color: var(--theme-color);
      }
      .el-select-tree__tags-wrapper {
        max-width: 180px !important;
        min-width: 0 !important;
        width: auto !important;
        overflow: hidden;
      }
      .el-tree-select__tags-text {
        max-width: 80px !important;
      }
      .el-select-dropdown{
        min-width: 400px!important;
      }
      .el-tree-select__input {
        display: inline-block;
        width: 20px !important;
      }
      .el-input__suffix-inner .el-input__icon {
        line-height: 32px !important;
      }
      .el-input__inner {
        border-radius: 8px !important;
      }
    }
  }
  
  </style>

三、引用

<template>
    <div class="home_box">
      <span>多选</span>
      <TreeSelect @clearNode="clearNode" @changeSelect="changeSelect" @treeSelect="treeSelect"></TreeSelect>
      <span>单选</span>
      <TreeSelect :type="'radio'" @clearNode="clearNode" @clickTreeNode="clickTreeNode"></TreeSelect>
    </div>
</template>
  
<script>
  import TreeSelect from './TreeSelect'
  
  export default {
    name: 'Hmoe',
    components:{TreeSelect},
    data () {
      return {}
    },
    methods: {
      // 清空select
      clearNode(){
        console.log('清空select');
      },
      // 删除tag时触发--多选
      changeSelect(data){
        console.log('删除tag时触发',data);
      },
      // 切换节点复选框选中状态--多选
      treeSelect(data){
        console.log('切换节点复选框选中状态',data);
      },
      // 单选点击树结构子节点--单选
      clickTreeNode(data){
        console.log('单选点击树结构子节点',data);
      },
    }
  }
  </script>
  <style scoped></style>
  

四、效果

多选

单选

总结

踩坑路漫漫长@~@