elementUI的tree搜索功能当搜索到二级节点时自动展开并显示其下的三级和四级数据

由于自带的组件不带这个功能,自己递归实现

<template>
  <div class="ele-body bz_Color">
    <el-card shadow="never" v-loading="loading">
      <ele-split-layout
        width="266px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div>
          <ele-toolbar class="ele-toolbar-actions">
            <template>
              <el-input
                clearable
                size="small"
                v-model="filterText"
                @input="handleFilter"
                placeholder="请输入物料名称"
              />
            </template>
          </ele-toolbar>
          <div class="ele-border-lighter sys-organization-list">
            <el-tree
              ref="tree"
              :data="data"
              highlight-current
              node-key="id"
              :props="{ label: 'materialTypeName' }"
              :expand-on-click-node="false"
              :default-expand-all="true"
              :filter-node-method="filterNode"
              @node-click="onNodeClick"
            >
            </el-tree>
          </div>
        </div>
        <template v-slot:content>
          <bom-list
            v-if="current"
            :tree-id="current.id"
            :is-process="current.isProcess"
            :is-line="current.isLine"
            :process-id="processId"
            :line-id="lineId"
            :be-line-id="beLineId"
            :level="current.level"
            v-bind:organization-ids="selectedOrganizationIdsStr"
          />
        </template>
      </ele-split-layout>
    </el-card>
  </div>
</template>

<script>
  import bomList from './components/bom-list.vue';
  import { getBomTree } from '@/api/basic/material';
  let listBase = [];
  export default {
    name: 'BusinessBom',
    components: { bomList },
    data() {
      // 默认表单数据
      const defaultWhere = {};
      return {
        filterText: '',
        where: { ...defaultWhere },
        // 加载状态
        loading: true,
        // 列表数据
        data: [],
        LineList: [],
        proList: [],
        treeList: [],
        // 选中数据
        current: null,
        // 是否显示表单弹窗
        showEdit: false,
        // 编辑回显数据
        editData: null,
        // 上级id
        parentId: null,
        isLine: 0,
        lineId: null,
        beLineId: null,
        isProcess: 0,
        processId: null,
        // 左侧树选中的机构id集合
        selectedOrganizationIds: [],
        // 左侧树选中的机构id以逗号拼接字符串
        selectedOrganizationIdsStr: null
      };
    },
    created() {
      this.query2();
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    // mounted() {
    //   this.$refs.tree.on('filter-complete', this.handleFilterComplete);
    // },
    // beforeDestroy() {
    //   this.$refs.tree.off('filter-complete', this.handleFilterComplete);
    // },
    methods: {
      handleFilter(value) {
        this.$refs.tree.filter(value);
      },
      filterNode(value, data) {   //这里使用递归过滤出需要的内容
        function recursion(id, list, target, key) { //filterNode本身就是个循环
          const item = list.find((l) => id == l.id);
          if (item[key] > target) {
            return recursion(item.parentId, list, target, key);
          } else {
            return item.materialTypeName.includes(value.replace(/\s+/g, ''));///\s+/g, ''去掉内容的空格
          }
        }
        function contentQueries(item, target, key) {
          if (item[key] < target) {
            return item.materialTypeName.includes(value.replace(/\s+/g, ''));
          } else {
            return recursion(item.parentId, listBase, target, key);//listBase是tree结构的一级数据,在query2方法里获取的
          }
        }
        if (!value) return true;
        return contentQueries(data, 2, 'level'); //data是单条数据,2是第二级,level就是变量名称
      },

      query2() {
        this.loading = true;
        getBomTree({
          materialClass: 2,
          roleOrgIds: this.$store.state.user.roleOrgIds,
          roleProcessIds: this.$store.state.user.roleProcessIds
        })
          .then((list) => {
            listBase = list;
            this.loading = false;
            this.data = this.$util.toTreeData({
              data: list,
              idField: 'id',
              parentIdField: 'parentId'
            });
            this.$nextTick(() => {
              this.onNodeClick(this.data[0]);
            });
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 选择数据 */
      onNodeClick(row) {
        if (row) {
          this.lineId = null;
          this.processId = null;
          this.beLineId = null;
          this.current = row;
          this.selectedOrganizationIds = [];
          this.findSelectedOrganizations(this.current);
          if (this.selectedOrganizationIds.length > 0) {
            this.selectedOrganizationIdsStr =
              '(' + this.selectedOrganizationIds.join(',') + ')';
          } else {
            this.selectedOrganizationIdsStr = null;
          }
          this.isProcess = row.isProcess;
          if (row.level == 3) {
            this.lineId = row.realId;
          }
          if (row.level == 4) {
            this.processId = row.realId;
            this.beLineId = row.beLineId;
          }
          this.$refs.tree.setCurrentKey(row.id);
        } else {
          this.current = null;
        }
      },
      findSelectedOrganizations(node) {
        if (node != null && (node.level == 1 || node.level == 2)) {
          var that = this;
          that.selectedOrganizationIds.push(node.realId);
          if (node.children && node.children.length > 0) {
            node.children.forEach((item) => {
              that.findSelectedOrganizations(item);
            });
          }
        }
      },
      /* 显示编辑 */
      openEdit(item) {
        this.editData = item;
        this.showEdit = true;
      }
    }
  };
</script>