vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例
一個(gè)懶加載的樹狀表格實(shí)例
實(shí)現(xiàn)一個(gè)樹狀表格，需要用到vxe-table這個(gè)庫，雖然element-ui也能實(shí)現(xiàn)，但這個(gè)庫是專門針對(duì)表格做了更多的拓展，功能更多一些。
接下來，說一下使用方式。
安裝
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 實(shí)例掛載全局窗口對(duì)象，屬性名稱隨意定義，例如：$XModal // Vue.prototype.$modal = VXETable.modal
模板
要實(shí)現(xiàn)懶加載，tree-config配置參數(shù)如下：
lazy: 懶加載hasChild: 是否有子節(jié)點(diǎn)，值應(yīng)為布爾值。為true則加載childrenchildren: 映射的要加載的子節(jié)點(diǎn)集合loadMethod: 實(shí)現(xiàn)加載子節(jié)點(diǎn)的方式
<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="同步狀態(tài)" :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}個(gè)樹形節(jié)點(diǎn)`, records);
},
formatStatus({ cellValue, row, column }) { // 格式化方法
return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
},
loadChildrenMethod({ row }) { // 加載子節(jié)點(diǎn)
/**
* @desc: 這里必須返回一個(gè)promise對(duì)象，把結(jié)果通過resolve返回。
* 因?yàn)樵创a返回的是一個(gè)promise，如果我們的結(jié)果不是promise就會(huì)報(bào)錯(cuò)。
* `xxxx catch is undefind` cathc的報(bào)錯(cuò)。
* 當(dāng)時(shí)腦闊痛了好久。
*/
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懶加載樹形表格時(shí)的注意點(diǎn)
先放個(gè)簡單的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懶加載執(zhí)行兩次，loading未取消的bug，后面升級(jí)版本即可。不升級(jí)的情況下可以如下面處理。
mounted() {
? ? // 2.15.3 版本修復(fù)了這個(gè)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;
? ? ? ? ? // 修復(fù)快速切換數(shù)據(jù)時(shí)報(bào)錯(cuò)?
? ? ? ? ? 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、數(shù)據(jù)顯示
1.tableData是開始時(shí)的數(shù)據(jù)，后面load懶加載的數(shù)據(jù)都不會(huì)在tableData中
2.設(shè)置tableData=[]，并沒有清空樹里面的數(shù)據(jù)，如果下次懶加載返回的是空數(shù)組，但頁面上會(huì)顯示上一次的數(shù)據(jù)。(如果你這個(gè)時(shí)候點(diǎn)擊下載數(shù)據(jù)，就會(huì)出現(xiàn)下載的內(nèi)容跟表格顯示的不一致）
?resetLazyTree() { ??
?? ?// 單獨(dú)設(shè)置這個(gè)是無效的，大坑~ 一定要清空孩子，否則loadOrgTable返回?cái)?shù)據(jù)在沒有孩子的情況下會(huì)顯示上次的孩子節(jié)點(diǎn)
?? ?this.tableData = []?
?? ?this.$set(this.$refs.refTable.store.states, 'lazyTreeNodeMap', {})
},3.有時(shí)表格下方多出一行空白， 或者樹形表格加載子節(jié)點(diǎn)時(shí)，可能出現(xiàn)滾動(dòng)條，導(dǎo)致行錯(cuò)位。
都可以嘗試重新刷新表格布局
// 對(duì) Table 進(jìn)行重新布局
refreshTableLayout() {
? ?this.$nextTick(() => {
? ? ?this.$refs.refTable.doLayout()
? ?})
},3、滾動(dòng)條
不去改這個(gè)默認(rèn)滾動(dòng)條的樣式，會(huì)少很多問題。。。。
比如改變了滾動(dòng)條的寬為現(xiàn)在的一半，那么會(huì)出現(xiàn)最后一行的第一列文字被擋住一半。
這個(gè)先放著，有好的解決辦法再來。。。
4、數(shù)據(jù)結(jié)構(gòu)
像這種雙表頭的表格，數(shù)據(jù)結(jié)構(gòu)可以如下：
this.tableData = [{
orgId: 1,
orgName: '銀行境內(nèi)機(jī)構(gòu)匯總',
hasChildren: true,
indData: [
{
name："名字1",
a: '--',
b: '--',
}，
{
name："2",
a: '--',
b: '--',
}，
],
children: [],
}]
如果名字欄的表頭先渲染，那么接口indData里面的順序一定要跟著名字的順序，否則會(huì)出現(xiàn)數(shù)據(jù)錯(cuò)亂。
5、el-table的fixed導(dǎo)致的問題
場(chǎng)景：使用excelJs 的DOM類型下載來下載表格中的數(shù)據(jù)， 在獲取el-table下載數(shù)據(jù)后，發(fā)現(xiàn)sheet頁中有兩份相同的數(shù)據(jù)。
原因：設(shè)置了fixed后，el-table渲染的結(jié)構(gòu)中有兩個(gè)table
解決辦法：通過$refs獲取到虛擬dom，刪除第二個(gè)表的dom即可， 這里不能獲取真實(shí)的dom， 否則頁面受到影響。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中實(shí)現(xiàn)某一些路由頁面隱藏導(dǎo)航欄的功能操作
這篇文章主要介紹了在vue中實(shí)現(xiàn)某一些路由頁面隱藏導(dǎo)航欄的功能操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue?@scroll監(jiān)聽滾動(dòng)條事件方式
這篇文章主要介紹了vue?@scroll監(jiān)聽滾動(dòng)條事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue運(yùn)行環(huán)境搭建全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue中的config配置 ,本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-01-01
使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)
這篇文章主要介紹了使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中使用v-print打印出現(xiàn)空白頁問題及解決
這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue視頻時(shí)間進(jìn)度條組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3前端生成隨機(jī)id(生成?UUID)實(shí)際運(yùn)用
前端在做增刪改查時(shí)通常會(huì)使??個(gè)唯?數(shù)值做為數(shù)據(jù)的key值,下面這篇文章主要給大家介紹了關(guān)于Vue3前端生成隨機(jī)id(生成?UUID)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04
vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，在vue中數(shù)據(jù)請(qǐng)求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法,需要的朋友可以參考下2018-09-09
vuex actions異步修改狀態(tài)的實(shí)例詳解
今天小編就為大家分享一篇vuex actions異步修改狀態(tài)的實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11