el-tree 过滤后/搜索后的全选问题

最新推荐文章于 2024-09-30 17:57:26 发布

有蝉

最新推荐文章于 2024-09-30 17:57:26 发布

阅读量2.6k

点赞数 3

分类专栏： vue+element-ui 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_37899792/article/details/127408614

版权

vue+element-ui 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文介绍了在Vue项目中，利用el-tree组件结合filter-node-method属性进行数据筛选，并通过@check监听事件实现只选中筛选后子节点的操作。详细讲解了相关代码实现逻辑，包括获取叶子节点的id、处理选中状态等关键步骤。

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

el-tree的数据在使用“filter-node-method”的方法之后，如何只选中筛选后的子节点

主要使用el-tree提供的@check来实现。

<el-input
              v-model="filterText"
              style="margin-top: 10px"
              placeholder="请输入查询名称"
              clearable
            />
<el-tree
        
            ref="tree"
            show-checkbox
            highlight-current
            :data="list"
            :default-checked-keys="checkedList"
            node-key="id"
            :props="defaultProps"
            default-expand-all
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            @check="check"
/>
<script>
export default {
 data() {
    return {
      filterText: '',
      formInline: {},
      list: [],
      searchKey: '',
      disabled: false,
      ids: [],
      checkedList: [],
      defaultSelection: [],
      multipleSelection: [],
      defaultProps: {
        children: 'childGroups',
        label: 'name'
      }
    }
  },
watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }, 
  },
methods: {
    check(data) {
      //data即当前点击的节点  
      if (data.childGroups.length) {
        // 获取当前选中的叶子节点的id
        const checkedIds = this.getLeafNodes(data.childGroups)
        checkedIds.forEach((item) => {
          const node = this.$refs.tree.getNode(item)//根据id获取node
          if (!node.visible && node.checked) {//将选中且隐藏的节点设置为 不选中
            this.$refs.tree.setChecked(item, false)
          }
        })
      }
    },
    //获取叶子节点的数据
    getLeafNodes(tree) {
      const arr = []
      tree.length &&
        tree.forEach((item) => {
          if (item.childGroups && item.childGroups.length) {
            arr.push(...this.getLeafNodes(item.childGroups))
          } else {
            arr.push(item.id)
          }
        })
      return arr
    },
    //父组件调用此方法，获取被选中的叶子节点
    getResult() {
      const result = this.$refs.tree.getCheckedNodes(true)
      return result
    },
    
  }
}
</script>