el-tree过滤后树形全选问题

长欢愉

已于 2023-08-30 10:39:10 修改

阅读量2k

点赞数

文章标签： vue.js javascript 前端

于 2023-06-30 10:53:45 首次发布

本文链接：https://blog.csdn.net/qq_52499093/article/details/131470904

版权

文章讲述了在使用Vue3和ElementPlus的el-tree组件时，启用复选框并应用过滤功能后，全选父节点会选中所有子节点，包括被过滤隐藏的。解决方案是通过搜索后重新渲染数据，根据过滤结果更新树结构和默认勾选值，以确保只选中可见的子节点。

摘要由CSDN通过智能技术生成

el-tree过滤后树形全选问题

vue3、element plus

使用el-tree组件时，如果启用了 复选框 ，通过 filter-node-method 方法过滤后点击一个父节点依旧会把它下面的所有显示或不显示的子节点全部勾选上，我希望只会勾选上当前父节点下显示的子节点。

不能勾选的原因

简单来说就是 filter-node-method方法筛选的原理是控制节点的显示隐藏，所以勾选父级节点时，隐藏的子节点也会被勾选上

解决方法

用户搜索后，重新渲染一次数据

// HTML
<el-tree ref="treeRef" :data="treeList" 
                     :filter-node-method="filterNode"
                     @check="boxCheck" 
                     show-checkbox 
                     node-key="snowId" 
                     :default-checked-keys="defaultKey"
            />

const defaultKey = ref([]) // 默认勾选值
const threeData = ref([]) // 树数据
const treeParams = ref({
  snowId: []
})

function filterNode(value) {
  if (value) {
  // threeDataCopy -- 深拷贝的原始数据
    threeData.value = filterTree(value, threeDataCopy.value);
    // defaultKey-- 默认勾选值，若没有此值，用户在搜索前后的勾选框不会被选中
    defaultKey.value = treeParams.value.snowId
  } else {
    threeData.value = threeDataCopy.value
    defaultKey.value = treeParams.value.snowId
  }
}

// 递归方法
function filterTree(str, data) {
    let filteredData = [];
    for (let i = 0; i < data.length; i++) {
        let node = data[i];
        if (node.name.includes(str)) {
            filteredData.push(node);
        }
        if (node.children && node.children.length > 0) {
            let filteredChildren = filterTree(str, node.children);
            if (filteredChildren.length > 0) {
                filteredData.push({
                    ...node,
                    children: filteredChildren
                });
            }
        }
    }
    return filteredData;
}

// 左侧复选框点击
function boxCheck(val, data) {
  let treeDataId = []
  data.checkedNodes.filter(item => !item.children).filter(flag => {
    treeDataId.push(flag.snowId)
  })
  treeParams.value.snowId = treeDataId
}