elementUI select+tree 模糊查询+过滤组织+联动

备份：

 1、tree模糊查询

2、根据privilegeLevel过滤tree显示层级

<template>
    <select-tree v-model="v" :defaultProps="defaultProps"  :list="treeNodes" :defaultExpandAll="false" node-key="code" :default-expanded-keys="['-1']">
        <template v-slot:default="tree">
            <span>{{tree.data.name}}</span>
            <el-tag effect="dark" v-if="tree.data.authType === '0'">二级</el-tag>
            <el-tag effect="dark" type="info" v-if="tree.data.authType === '-1'">一级</el-tag>
            <el-tag effect="dark" type="success" v-if="tree.data.authType === '1'">四级</el-tag>
            <el-tag effect="dark" type="warning" v-if="tree.data.authType === '2'">三级</el-tag>
        </template>
    </select-tree>
</template>

<script>
    export default {
        name: "auth-tree",
        props: {
            value: {
                type: Array,
                default: []
            },
        },
        data() {
            return {
                v: this.value,
                data: [],
                defaultProps: {
                    label: 'name',
                    children: 'children'
                },
                tableHeight: null,
                treeNodes: []
            }
        },
        methods: {
            processTree(tree) {
                if (tree && tree.length > 0) {
                    for (let i = tree.length - 1; i >= 0; i--) {
                        let node = tree[i];

                        if(node.checked) {
                            if(this.notEmpty(node.children)) {
                                for(let child of node.children) {
                                    child.checked = true;
                                }
                            }
                        }

                        if (node.children) {
                            this.processTree(node.children);
                        }

                        if ((!this.notEmpty(node.children) || node.children.length <= 0) && !node.checked) {   //没有子元素且本身又未被选中，则删除本元素
                            tree.splice(i, 1);
                        }
                    }
                }
            },
          loopLevel(tree,newLevel) {
            tree = tree.filter(item => {
              return !newLevel.includes(item.authType)
            });
            tree.forEach(item => {
              if (item.children && item.children.length) {
                item.children = this.loopLevel(item.children, newLevel);
              }
            });
            return tree;
          },
        },
        created() {
            this.$ajax({
                url: '/user/auth-tree',
                method: 'get',
            }).then((d) => {
                // let level = [-1, 0, 2, 1]; // 对应一级  二级  三级  四级
                let level = ['-1', '0', '2', '1']; // 对应一级  二级  三级  四级
                let privilegeLevel = 4; // 返回显示层级  1显一级 2显一级  二级 3显一级  二级  三级  4全显示
                let newLevel = [];
                level.map((item, index) => {
                  if(index > privilegeLevel-1) {
                    newLevel.push(item);
                  }
                });
                if (privilegeLevel!==1) { //1为根目录 不执行遍历
                  this.loopLevel(d, newLevel, privilegeLevel);
                }
                //加上根节点
                let rootNode = {
                    authType: "-1",
                    name: "一级",
                    checked: false,
                    code: "-1"
                };
                this.processTree(d);
                rootNode.children = privilegeLevel===1 ? null : d;
                this.treeNodes = [rootNode];
            }).catch(() => {
            });
        },
        watch: {
            v: {
                handler(newValue, oldValue) {
                    this.$emit('input', newValue);
                },
                deep: true
            },
            value: {
                handler(newValue, oldValue) {
                    this.v = newValue;
                },
                deep: true
            },
        }
    }
</script>

<style scoped>

</style>

<template>
    <div class="box">
        <el-select size="small" v-model="names" multiple
                   clearable @clear="selectClear"  @change="changeHandle" @visible-change="visibleChange"  collapse-tags :title="titleText">
            <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText"
                    clearable>
            </el-input>
            <el-option class="option-style" :value="selectTree">
                <el-tree ref="tree" :data="list" :props="defaultProps" :node-key="nodeKey"
                         show-checkbox v-on="superListener"
                         :default-expand-all="defaultExpandAll"
                         :filter-node-method="filterNode"
                         :default-expanded-keys="defaultExpandedKeys">
                    <div slot-scope="{node, data}">
                        <slot v-bind:node="node" v-bind:data="data">
                            <span :class="[{'tree-click': treeClick==data.value}]">{{data[labelName]}}</span>
                        </slot>
                    </div>
                </el-tree>
            </el-option>
        </el-select>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                treeClick: null,
                selectTree: [],
                names: [],
                filterText:'',
                changeName: [],
                isExpandAll: false,
            }
        },
        props: {
            value: {
                type: Array,
                default: []
            },
            list: {
                type: Array,
                default: () => []
            },
            defaultProps: {
                type: Object,
                default: () => {
                    return {label:'label'};
                }
            },
            defaultExpandAll: {
                type: Boolean,
                default: false
            },
            valueProperty: {
                type: String,
                default: 'code'
            },
            nodeKey: {
                type: String,
                default: 'id'
            },
            defaultExpandedKeys: {
                type: Array,
                default: () => {
                    return [];
                }
            }
        },
        computed: {
            labelName() {
                if(this.notEmpty(this.defaultProps) && this.notEmpty(this.defaultProps.label)) {
                    return this.defaultProps.label;
                }

                return 'label';
            },
            superListener: function () {
                return Object.assign({}, this.$listeners, {
                    'check': (obj, {checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys}) => {
                        this.selectTree = []; //置空
                        let value = [];
                        let names = [];
                        checkedNodes.forEach((item) => {
                            this.selectTree.push({id: item.id, label: item[this.labelName]});
                            value.push(item[this.valueProperty]);
                            names.push(item[this.labelName]);
                        });
                        this.$emit('input', value);
                        this.names = names;
                    },
                });
            },
            titleText () {
                if(this.names && this.names.length > 0) {
                    return this.names.join(',');
                }
                return '';
            }
        },
        methods: {
            selectClear() {
                this.$emit('input', []);
                this.selectTree = [];
                this.$refs.tree.setCheckedKeys([]);//清空树选中状态
            },
          // 改变select input  联动树复选框
            changeHandle() {
              let arr = [];
              this.$refs.tree.getCheckedNodes().map(item => {
                if(this.names.includes(item.name)) {
                  arr.push(item.code);
                };
                this.$emit('input', arr);// 手动更改select 联动复选框选中
              });
            },
            // select 下拉框true显示 false隐藏
            visibleChange(v) {
              if (v===false) {
                this.filterText = '';
              }
              if (this.list[0].children&&this.list[0].children.length>0) {
                this.TreeExpandOrFold(this.list[0].children, this.$refs.tree);
              }
            },
            TreeExpandOrFold (treeList, treeRef) {
              // 未选中  一键折叠
              treeList.forEach((item,index)=>{
                treeRef.store.nodesMap[treeList[index].code].expanded = this.isExpandAll;
                if(item.children && item.children.length>0){
                  let newTreeRef = treeRef.store.nodesMap[treeList[index].code]
                  this.TreeExpandOrFold(item.children, newTreeRef)
                }
              })
            },
            // 树 查询
            filterNode(value, data) {
              if (!value) return true;
              return data.name.indexOf(value) !== -1;
           }
        },
        watch: {
          filterText: {
            handler(val) {
              this.$refs.tree.filter(val);
            },
            deep: true
          },
            value: {
                handler(newValue, oldValue) {
                    // if (newValue.length === 0) {
                    //     this.TreeExpandOrFold(this.list[0].children, this.$refs.tree);
                    // }
                    this.$refs.tree.setCheckedKeys([]);//清空树选中状态
                    this.$nextTick(()=>{
                        this.$refs.tree.setCheckedKeys(newValue);
                        let checkedNodes = this.$refs.tree.getCheckedNodes();
                        let names = [];
                        this.selectTree=[];
                        checkedNodes.forEach((item) => {
                            this.selectTree.push({id: item.id, label: item[this.labelName]});
                            names.push(item[this.labelName]);
                        });
                        this.names = names;
                    })
                },
                deep: true
            },
        }
    }
</script>

<style scoped>
    .box {
        width: 100%;
        height: 100%;
    }

    .option-style {
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
    }
    /deep/ .el-select {
        width: 100%;
    }
    /deep/ .el-select .el-input--small .el-input__inner {
        height: 28px;
        line-height: 28px;
    }

    /deep/ .el-select .el-input--small .el-input__icon {
        line-height: 28px;
    }
</style>