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>

希望能夠幫助大家，如果哪些地方有缺陷還請大家指正。

作者：一個想留在杭州發展的擼碼青年。