ElementUI Tree控件在懒加载模式下的重新加载和模糊查询

之所以使用懒加载是为了提高性能，而且只有在懒加载模式下默认会给所有显示节点设置展开按钮。leaf也可以做到，但是要操作数据比较麻烦。

要实现懒加载模式下的模糊查询以及重新加载必须要使用data与lazy、load相结合。

lazy和load负责树的初始加载和懒加载，还要绑定node-expand事件加载子节点数据。

data负责模糊查询下填充查询结果树，它与懒加载结合使用并不冲突。

关键code一：

            this.$nextTick(() => {
              let nodedata = this.node.childNodes[0]
              nodedata.expanded = true
              nodedata.loadData()
            })

作用：在初次设置顶级菜单并想展开二级菜单时候必须用到，在根节点渲染上去后执行展开并加载二级节点。

关键code二：

    /**
     * @param item 搜索输入内容
     */
    treeChange(item) {
      //存储 搜索输入的值
      if (item || item === 0) {
        let params = { organizationId: item.organizationId, dimon: this.dimensionModel }
        changeTreeData(params).then((res) => {
          this.treeData = res.resultData.organizationVos
        })
      }
    },

作用：在搜索控件值改变后触发，查询结果赋值给data达到重新加载tree的目的。

关键code三：

    /**
     * 重载树
     */
    reloadTree() {
      this.node.childNodes = []
      this.loadNode(this.node, this.resolveFunc)
    }

作用：初始化Tree控件数据，node和resolveFunc两个参数需要在load绑定的事件中手动缓存起来方便之后调用。

最后附上源码给大家参考！！！

<template>
  <div class="ns-biz-many-type-tree">
    <div>
      <el-select v-model="value" placeholder="请选择" size="small">
        <el-option
          v-for="item in treeTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          @change="treeTypeChange"
        >
        </el-option>
      </el-select>
      <el-button type="primary" size="small">搜索</el-button>
    </div>

    <el-autocomplete
      v-model="treeSearchInput"
      :fetch-suggestions="remoteSearch"
      value-key="organizationName"
      placeholder="请输入内容"
      size="small"
      @select="treeChange"
    >
      <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick"> </i
    ></el-autocomplete>

    <el-tree
      ref="newTree"
      :props="defaultProps"
      :data="treeData"
      lazy
      :load="loadNode"
      @check-change="handleCheckChange"
      @node-expand="expandNode"
    >
    </el-tree>
  </div>
</template>
<script>
import {
  getOrgTreeData,
  getOrgTreeChildData,
  getSearchData,
  changeTreeData,
} from './service/NS-biz-organize-tree'
export default {
  name: 'Ns-biz-many-type-tree',
  props: {},
  data() {
    return {
      treeData: [],
      treeTypeOptions: [
        {
          value: '1',
          label: '组织架构',
          labelName: 'organizationName',
          childrenName: 'childOrganizations',
        },
        {
          value: '2',
          label: '工作组',
          labelName: 'groupName',
          childrenName: 'childGroup',
        },
      ],
      defaultProps: {
        label: 'organizationName',
        children: 'childOrganizations',
      },
      node: {},
      treeSearchInput: '',
      value: '1',
      topMenuName: '',
      dimensionModel: 'adm',
      resolveFunc: function () {},
    }
  },
  mounted() {

  },
  methods: {
    // 树节点点击事件
    handleCheckChange() {},
    // 树类型切换事件
    treeTypeChange() {},
    //快捷图标搜索
    handleIconClick() {},
    querySearchAsync() {},
    // 加载Tree节点
    loadNode(node, resolve) {
      console.log('树对象', node)
      if (node.level === 0) {
        this.node = node
        this.resolveFunc = resolve
        // 组织架构树
        if (this.value == '1') {
          getOrgTreeData({ dimon: this.dimensionModel, selectAll: false }).then((res) => {
            let { organizationVos } = res.resultData
            this.$nextTick(() => {
              let nodedata = this.node.childNodes[0]
              nodedata.expanded = true
              nodedata.loadData()
            })
            return resolve([
              {
                organizationName: organizationVos[0].organizationName,
                organizationId: organizationVos[0].organizationId,
              },
            ])
          })
        } else {
        }
      } else {
        setTimeout(() => {
          getOrgTreeChildData({
            id: node.data.organizationId,
            dimon: this.dimensionModel,
            selectAll: false,
          }).then((res) => {
            resolve(res.resultData.organizationVos)
          })
        }, 500)
      }
    },
    // 节点展开事件
    expandNode(obj, node, self) {
      if (node.level !== 0) {
        console.log('node', node)
        if (node.data.childOrganizations == null) {
          if (this.value == '1') {
            getOrgTreeChildData({
              id: node.data.organizationId,
              dimon: this.dimensionModel,
              selectAll: false,
            }).then((res) => {
              node.data.childOrganizations = res.resultData.organizationVos
            })
          } else {
          }
        }
      }
    },
    /**
     * 树 输入触发 搜索查询
     * @param query
     * @param cb
     */
    remoteSearch(query, cb) {
      if (query !== '') {
        let params = { organizationName: query, dimon: this.dimensionModel }
        getSearchData(params)
          .then((r) => {
            cb(r.resultData)
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        cb([])
      }
    },
    /**
     * @param item 搜索输入内容
     */
    treeChange(item) {
      // 存储 搜索输入的值
      if (item || item === 0) {
        let params = { organizationId: item.organizationId, dimon: this.dimensionModel }
        changeTreeData(params).then((res) => {
          this.treeData = res.resultData.organizationVos
        })
      }
    },
    /**
     * 重载树
     */
    reloadTree() {
      this.node.childNodes = []
      this.loadNode(this.node, this.resolveFunc)
    },
  },
  watch: {
    value(val) {
      this.reloadTree()
    },
    treeSearchInput(val) {
      if (val == '') {
        this.reloadTree()
      }
    },
  },
}
</script>
<style lang="less" scoped>

</style>

希望能够帮助大家，如果哪些地方有缺陷还请大家指正。

作者：一个想留在杭州发展的撸码青年。