elemen ui tree如何只获取显示的选中值

Question

问题描述

elemen ui tree获取显示选中数据问题，
如图公司节点下十几个子节点，搜索“染色”展示该公司下有三个子节点，选中调用getCheckedNodes()方法测试console发现获取选中值有13个（相当于把该节点下的所有子节点选中了），而不是展示上显示的三个。
这个该怎么处理？

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<el-tree style="height:330px;overflow-y:auto;overflow-x:auto;"

        :data="datatree"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @check="checkTree()"
        :render-content="renderContent"
        ref="tree2">
      </el-tree>
      
     console.log("test--------------------1>",this.$refs.tree2.getCheckedNodes());
    console.log("test--------------------2>",this.$refs.tree2.getCheckedKeys());

你期待的结果是什么？实际看到的错误信息又是什么？

期望结果：获取选中的三个，现在错误：获取了所有

Answer 1

可以利用filter-node-method来过滤；

<el-tree ref="wtree" 
:data="permissionOptions" 
:props="props"
 node-key="id"
 default-expand-all
 show-checkbox
 :expand-on-click-node="false"
 :check-on-click-node="true"
 :filter-node-method="handleTreeFilter"
/>

handleTreeFilter(value, data, node) {
      if (node.checked || node.indeterminate) {
        return true
      } else {
        return false
      }
    }

if (this.$refs.wtree && this.permissionOptions.length > 0) {
              this.$refs.wtree.setCheckedKeys(ids)
              this.$nextTick(() => {
                if (this.$refs.wtree) {
                  this.$refs.wtree.filter()
                }
              })
            }