vue如何實現一個懶加載的樹狀表格

這篇文章主要介紹“vue如何實現一個懶加載的樹狀表格”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue如何實現一個懶加載的樹狀表格”文章能幫助大家解決問題。

一個懶加載的樹狀表格實例

實現一個樹狀表格，需要用到vxe-table這個庫，雖然element-ui也能實現，但這個庫是專門針對表格做了更多的拓展，功能更多一些。

接下來，說一下使用方式。

安裝

npm install xe-utils vxe-table

// 入口文件引入，一般是main.js
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

// 給 vue 實例掛載全局窗口對象，屬性名稱隨意定義，例如：$XModal
// Vue.prototype.$modal = VXETable.modal

模板

要實現懶加載，tree-config配置參數如下：

• lazy: 懶加載

• hasChild: 是否有子節點，值應為布爾值。為true則加載children

• children: 映射的要加載的子節點集合

• loadMethod: 實現加載子節點的方式

<template>
    <div>
         <vxe-table
             resizable
             row-id="id"
             :tree-config="{lazy: true, children: 'childrens', hasChild: 'hasNaxt', loadMethod: loadChildrenMethod}"
             :data="tableData"
             :checkbox-config="{labelField: 'orgName', highlight: true }"
             @checkbox-change="selectChangeEvent">
             <vxe-table-column type="seq" title="ID" width="100" />
             <vxe-table-column field="orgName" title="組織名稱" type="checkbox" tree-node />
             <vxe-table-column field="orgId" title="企微組織編碼" />
             <vxe-table-column field="status" title="同步狀態" :formatter="formatStatus" />
         </vxe-table>
    </div>
</template>

js代碼 

export default {
    data() {
        return {
            tableData: [],
            loading: false
        };
    },
    mounted() {
        // this.tableData = window.MOCK_TREE_DATA_LIST;
        this.$bus.$on('send', data => {
            this.tableData = [data];
        });
    },
    methods: {
        selectChangeEvent({ records }) { // checkbox選中事件
            console.info(`勾選${records.length}個樹形節點`, records);
        },
        formatStatus({ cellValue, row, column }) { // 格式化方法
			return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
        },
        loadChildrenMethod({ row }) { // 加載子節點
        	/**
        	* @desc: 這里必須返回一個promise對象，把結果通過resolve返回。
        	* 因為源碼返回的是一個promise，如果我們的結果不是promise就會報錯。
        	* `xxxx catch is undefind` cathc的報錯。
        	* 當時腦闊痛了好久。
        	*/
            return new Promise((resolve, reject) => {
                this.$axios
                    .get(`/test/mdporg/workWeixin/queryChildrens?id=${row.id}`)
                    .then(res => {
                        let arr = res.data.childrens;
                        resolve(arr);
                    });
            });
        }
    }
};

使用el-table懶加載樹形表格時的注意點

先放個簡單的el-table例子

<el-table
  ref="refTable"
  :data="tableData"
  :load="loadOrgTable"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  row-key="orgId"
  lazy
  @expand-change="expandChange"
>
</el-table>

1、版本問題

el-table懶加載執行兩次，loading未取消的bug，后面升級版本即可。不升級的情況下可以如下面處理。

mounted() {
    // 2.15.3 版本修復了這個bug， 目前版本沒有更新 https://github.com/ElemeFE/element/pull/21041
    this.$refs.refTable.store.loadData = function(row, key, treeNode){
      const { load } = this.table;
      const { treeData: rawTreeData } = this.states;
      if (load && !rawTreeData[key].loaded) {
        rawTreeData[key].loading = true;
        load(row, treeNode, data => {
          if (!Array.isArray(data)) {
            throw new Error('[ElTable] data must be an array');
          }
          const { lazyTreeNodeMap, treeData } = this.states;
          // 修復快速切換數據時報錯 
          if(!treeData[key]) {
            return
          }
          treeData[key].loading = false;
          treeData[key].loaded = true;
          treeData[key].expanded = true;
          if (data.length) {
            this.$set(lazyTreeNodeMap, key, data);
          }
          this.table.$emit('expand-change', row, true);
        });
      }
    }
  },

2、數據顯示

1.tableData是開始時的數據，后面load懶加載的數據都不會在tableData中

2.設置tableData=[]，并沒有清空樹里面的數據，如果下次懶加載返回的是空數組，但頁面上會顯示上一次的數據。(如果你這個時候點擊下載數據，就會出現下載的內容跟表格顯示的不一致）

 resetLazyTree() {   
    // 單獨設置這個是無效的，大坑~ 一定要清空孩子，否則loadOrgTable返回數據在沒有孩子的情況下會顯示上次的孩子節點
    this.tableData = [] 
    this.$set(this.$refs.refTable.store.states, 'lazyTreeNodeMap', {})
},

3.有時表格下方多出一行空白， 或者樹形表格加載子節點時，可能出現滾動條，導致行錯位。

都可以嘗試重新刷新表格布局

// 對 Table 進行重新布局
refreshTableLayout() {
   this.$nextTick(() => {
     this.$refs.refTable.doLayout()
   })
},

3、滾動條

不去改這個默認滾動條的樣式，會少很多問題。。。。 

比如改變了滾動條的寬為現在的一半，那么會出現最后一行的第一列文字被擋住一半。

這個先放著，有好的解決辦法再來。。。

4、數據結構

像這種雙表頭的表格，數據結構可以如下：

this.tableData = [{
	orgId: 1,
	orgName: '銀行境內機構匯總',
	hasChildren: true,
	indData: [
		{
			name："名字1",
			a: '--',
			b: '--',
		}，
		{
			name："2",
			a: '--',
			b: '--',
		}，
	],
	children: [],
}]

如果名字欄的表頭先渲染，那么接口indData里面的順序一定要跟著名字的順序，否則會出現數據錯亂。

5、el-table的fixed導致的問題

場景：使用excelJs 的DOM類型下載來下載表格中的數據， 在獲取el-table下載數據后，發現sheet頁中有兩份相同的數據。

原因：設置了fixed后，el-table渲染的結構中有兩個table

解決辦法：通過$refs獲取到虛擬dom，刪除第二個表的dom即可， 這里不能獲取真實的dom， 否則頁面受到影響。

關于“vue如何實現一個懶加載的樹狀表格”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。