el-爱代码爱编程

filter-node-method 的逻辑不需要变动

以下为我的html结构

        <div>
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
            <el-checkbox style="margin-top: 10px" v-model="treeChecked" @change="treeCheckedChange"
                >全选/反选</el-checkbox
            >

            <el-tree
                v-loading="treeLoading"
                class="tree"
                ref="tree"
                :props="defaultProps"
                :data="list"
                node-key="id"
                show-checkbox
                @check="currentChecked"
                :filter-node-method="filterNode"
                :default-checked-keys="form.cardIDs"
                :default-expanded-keys="form.cardIDs"
            >
            </el-tree>
        </div>

我通过判断 treeChecked  是否选中

以下为data部分

    data() {
        return {
            // 筛选内容
            filterText: "",
            defaultProps: {
                label: "name"
            },
            list: [],
            // 全选/反选
            treeChecked: false,
            form: {
                // 选中的值
                cardIDs: [],
                managerID: "" //当前用户
            },
            loading: false,
            // 回显加载
            treeLoading: false,
   
        }
    },

filterText 为筛选的值

list 为全部数据

以下我们直接上重点，逻辑都在全选/反选按钮中

        treeCheckedChange() {
            // 全选
            if (this.treeChecked) {
                // 获取当前筛选文本
                const filter = this.filterText.toLowerCase() //toLowerCase转为小写  保证了匹配不区分大小写
                // 筛选出可见节点的 ID
                const visibleKeys = this.list
                    .filter(item => item.name.toLowerCase().includes(filter))
                    .map(item => item.id)

                // 设置选中状态
                this.$refs.tree.setCheckedKeys(visibleKeys)
                this.$nextTick(() => {
                    this.currentChecked(this.$refs.tree.getCheckedNodes(), {
                        checkedKeys: visibleKeys // 更新为筛选后的节点
                    })
                })
            } else {
                this.$refs.tree.setCheckedKeys([])
                this.form.cardIDs = []
            }
        }

在全选反选逻辑中，发现有 currentChecked 事件，也就是选中，每次选中的值，我都会赋值到 form.cardIDs 中，

  // 选中
        currentChecked(nodeObj, SelectedObj) {
            this.form.cardIDs = SelectedObj.checkedKeys
            // console.log(SelectedObj.checkedNodes) // 这是选中的节点数组
        },

以下为 js 完整代码

 data() {
        return {
            // 筛选内容
            filterText: "",
            defaultProps: {
                label: "name"
            },
            list: [],
            // 全选/反选
            treeChecked: false,
            form: {
                // 选中的值
                cardIDs: [],
                managerID: "" //当前用户
            },
            loading: false,
            // 回显加载
            treeLoading: false,
        
        }
    },



    methods: {
  
        // 取消
        cancel() {
            this.close()
        },
        close() {
            this.form.cardIDs = []
            this.$refs.tree.setCheckedKeys([])
            this.$emit("update:dialogVisible", false)
            this.treeChecked = false
        },
        // 选中
        currentChecked(nodeObj, SelectedObj) {
            this.form.cardIDs = SelectedObj.checkedKeys
            // console.log(SelectedObj.checkedNodes) // 这是选中的节点数组
        },
        // 筛选
        filterNode(value, data) {
            if (!value) return true
            // console.log("帅选!!", data.name.indexOf(value))

            return data.name.indexOf(value) !== -1
        },
        treeCheckedChange() {
            // 全选
            if (this.treeChecked) {
                // 获取当前筛选文本
                const filter = this.filterText.toLowerCase() //toLowerCase转为小写  保证了匹配不区分大小写
                // 筛选出可见节点的 ID
                const visibleKeys = this.list
                    .filter(item => item.name.toLowerCase().includes(filter))
                    .map(item => item.id)

                // 设置选中状态
                this.$refs.tree.setCheckedKeys(visibleKeys)
                this.$nextTick(() => {
                    this.currentChecked(this.$refs.tree.getCheckedNodes(), {
                        checkedKeys: visibleKeys // 更新为筛选后的节点
                    })
                })
            } else {
                this.$refs.tree.setCheckedKeys([])
                this.form.cardIDs = []
            }
        }
    },
    watch: {
        // 筛选
        filterText(val) {
            this.$refs.tree.filter(val)
        }

    }
}