el-tree如何展示条件过滤后的数据

<el-tree
  :data="data"
  ref="menuPc"
  node-key="id"
  empty-text="无数据"
  :props="defaultProps"
  :filter-node-method="filterNode"
></el-tree>
export default {
  name: "rolePower.vue",
  components: {},
  props: {},
  data() {
    return {
        data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        PCcheckedKeys:[1,4,8]
    };
  },
  watch: {
    PCcheckedKeys(val) {
      this.$refs.menuPc.filter(this.PCcheckedKeys);
    }
  },
  methods: {
    filterNode(value, data) {
        //value是filter方法传过来的数据,data是遍历的树结构一行的数据对象
        return value.some((i)=> data.id === i);
        //此方法只用返回true/false,来控制页面上是否显示树结构的那一行,筛选后页面上就剩下符合你的筛选条件的数据了
    },
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容