el-tree 实现过滤已选数据

今天在项目中遇到一个需求, 就是表格选中某条数据之后 移动到 别的数据之下, 其中需要过滤已选的数据, 下面是我实现的过程

1. 使用 el-tree 的 filter-node-method 方法

<template>
 <el-tree
        ref="tree"
        :data="treeList"
        node-key="id"
        :props="defaultProps"
        default-expand-all
        check-strictly
        show-checkbox
        @node-click="handleNodeClick"
        @check-change="checkChange"
        :filter-node-method="filterNode"
      >
</template>

2. 声明方法, 根据element-ui 官方的介绍, 该方法返回值为true或false, true是显示, false不显示, 接着根据我的业务逻辑, 选中的就不显示, 故该代码如下

<script>
export default {
methods: {
    filterNode(value, data) {
      let arr = this.fileData.multipleSelection.map((item) => item.id);
      return !arr.includes(data.id);
    },
  },
};
</script>

3. 效果如下