Vue el-tree 加载过滤出的父节点以及其包含的子节点

由于el-tree提供的过滤函数，过滤出来的目录节点不包含子节点，因此需要改造过滤函数，使其过滤出的目录节点包含子节点。

<template>
  <div>
    <el-input placeholder="请输入内容" v-model="filterText" clearable>
    </el-input>
    <el-tree :data="treeData" :filter-node-method="filterNode" ref="tree">
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: "",
      treeData: [
        {
          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",
            },
          ],
        },
      ],
    };
  },
  //实现输入就进行筛选功能,进行监听该值的变化
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 方法1
    //因为需要筛选出过滤的父节点以及其所有子节点,只调用element-ui自带的方法只会返回对应的数据,因此需要进行改造筛选条件
    filterNode(value, data, node) {
      if (!value) return true;
      // return data.label.indexOf(value) !== -1;//原有代码 不包含子节点
      let _array = []; //这里使用数组存储 只是为了存储值。
      this.getReturnNode(node, _array, value);
      let result = false;
      _array.forEach((item) => {
        result = result || item;
      });
      return result;
    },
    getReturnNode(node, _array, value) {
      let isPass =
        node.data && node.data.label && node.data.label.indexOf(value) !== -1;
      isPass ? _array.push(isPass) : "";
      if (!isPass && node.level != 1 && node.parent) {
        this.getReturnNode(node.parent, _array, value);
      }
    },

    // 方法2 速度更快
    filterNode(value, data, node) {
      if (!value) return true;
      // return data.label.indexOf(value) !== -1;//原有代码 不包含子节点
      let parentNode = node.parent,
        labels = [node.label],
        level = 1;
      while (level < node.level) {
        labels = [...labels, parentNode.label];
        parentNode = parentNode.parent;
        level++;
      }
      return labels.some((label) => label.indexOf(value) !== -1);
    },
  },
};
</script>

原有效果

改造后效果