element el-tree过滤组件

<template>
    <div>
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterText"></el-input>
        <el-checkbox v-model="checked" @change="checkedAllTree" class="checkBoxAll" v-if="!filterText" >全选</el-checkbox>
        <el-button class="filterbtn" v-else @click="checkFilterAll">全选过滤后的数据</el-button>
        <div  class="optionsBox">
            <el-tree
                node-key="id"
                show-checkbox
                default-expand-all
                :data="selectData"
                :props="defaultPropTrees"
                :default-checked-keys="defaultCheckList"
                :filter-node-method="filterNode"
                @check="getCheckedNodes"
                ref="tree">
            </el-tree>
        </div>
    </div>
</template>
<script>
export default {
    props:['selectData','columnProp','formData'],
    data() {
        return {
            defaultPropTrees: {
                label: 'name'
            },
            checked: false,
            defaultCheckList: [], 
            filterText: '',
            filterList: [],
            checkedNodes: []
        }
    },
    mounted() {
        this.getDefaultCheckList() 
    },
    watch: {
       filterText(val) {
            this.$refs.tree.filter(val)
            if(val) {
                this.getFilterList()
            }else {
                if(this.checkedNodes.length == 0) return 
                this.$nextTick(()=> this.$refs.tree.setCheckedNodes(this.checkedNodes))
                this.isSelectAll(this.checkedNodes,this.selectData)
            } 
        },
        checkedNodes() {
            this.$emit('checkedData',this.checkedNodes)
        }
    },
    methods:{
        filterNode(value, data) {
			if (!value) return true
			const val = value.toLowerCase()
			return data.name.toLowerCase().indexOf(val) !== -1
		},
         //全选 反选
        checkedAllTree() {
            if (this.checked) { // 全选
                this.$nextTick(()=> this.$refs.tree.setCheckedNodes(this.selectData))
            } else { // 取消选中
                this.$refs.tree.setCheckedKeys([])
            }
            this.checkedNodes = data
        },
        //获取选中节点
        getCheckedNodes(nodeobj, selectObj){
            this.checkedNodes = selectObj.checkedNodes
        },
        isSelectAll(chooseList, allList) {
            if(chooseList.length == allList.length && allList.length != 0) {
                this.checked = true 
            }else {
                this.checked = false
            }
        },
        getFilterList() {
            this.filterList = []
            const traverseNode = (node)=> {
                if (Object.prototype.toString.call(node) === '[object Array]') {
                    return node.map(t => traverseNode(t))
                }
                const data = {id: node.key, name: node.label, visible: node.visible}
                return data
            }
            const data = traverseNode(this.$refs.tree.store.root.childNodes)
            this.filterList = data.filter(item=>item.visible)
        },
        checkFilterAll() {
            this.checkedNodes = [...this.checkedNodes,...this.filterList]
            this.$nextTick(()=> this.$refs.tree.setCheckedNodes(this.filterList))
        },
        getDefaultCheckList() {
            this.defaultCheckList = []
            if (!this.formData?.hasOwnProperty(this.columnProp)) return
            const selectData = this.formData[this.columnProp]
            if(!selectData|| typeof(selectData) == 'string') return
            selectData.forEach(item => {
                if(item && item.name) this.defaultCheckList.push(item.id)  
            })
            this.isSelectAll(this.defaultCheckList,selectData)
        },
    },
}
</script>
<style lang="scss" scoped>
/deep/ .el-tree-node__expand-icon.is-leaf{
    display: none;
}
.checkBoxAll{
    margin-top: 5px;
}
.optionsBox{
    max-height: 500px;
    overflow: auto;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #45527E;
    border-color: #45527E;
}
/deep/ .el-checkbox__inner:hover{
    border-color: #45527E;
}
.filterbtn {
    padding: 5px;
    border-radius: 5px;
    background: #45527E;
    border-color:#45527E;
    color: #fff;
    font-size: 12px;
}
</style>