vue实现一个懒加载的树状表格实例
作者:婷叽 发布时间:2023-07-02 17:06:45
一个懒加载的树状表格实例
实现一个树状表格,需要用到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则加载childrenchildren
: 映射的要加载的子节点集合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, 否则页面受到影响。
来源:https://blog.csdn.net/qq_40128375/article/details/107342646
猜你喜欢
- 目录1.引言2.获取目标网站3.爬取目标网站4.解析爬取内容4.1. 解析全国今日总况4.2. 解析全国各省份疫情情况4.3. 解析江苏各地
- 任务详情给定一各地 2016 年 1 月和 2 月各个时间点的温度表格,表格预览见页面下方。数据表的第二列表示当前时间,数据表第一行第三列到
- 一、弹窗事件是什么?弹窗事件就是在我们执行某操作的时候,弹出信息框给出提示。或收集数据的时候,弹出窗口收集信息,不想收集可以取消隐藏。二、简
- 0. 我们如何通过邮件系统完成远程控制电脑(关机、重启等)?实现思路:需要有两个邮箱:接收指令邮箱(A)发送指令邮箱(B)被控制的电脑(查看
- 原文链接:Histogram of Oriented Gradients(文中的图片均来自翻译原文)什么是特征描述子特征描述子一张图片或者一
- PDOStatement::bindValuePDOStatement::bindValue — 把一个值绑定到一个参数(PHP 5 >
- 本节内容学习帮助大家梳理神经网络训练的架构。一般我们训练神经网络有以下步骤:导入库设置训练参数的初始值导入数据集并制作数据集定义神经网络架构
- Mac系统上虽然自带PHP和Apache,但是有时不是我们想要的版本呢。今天我们就在macOS Sierra(10.12.1)上安装比较新的
- Thrift 是一种接口描述语言和二进制通信协议。以前也没接触过,最近有个项目需要建立自动化测试,这个项目之间的微服务都是通过 Thrift
- 这学期有一门运筹学,讲的两大块儿:线性优化和非线性优化问题。在非线性优化问题这里涉及到拉格朗日乘子法,经常要算一些非常变态的线性方程,于是我
- python条件语句使用 if 表达式,难度不高,需要注意的是嵌套用法,以及如何设置对应的条件。if 条件判断语句python 语句是按固定
- python-docx库可用于创建和编辑Microsoft Word(.docx)文件。官方文档:链接地址备注:doc是微软的专有的文件格式
- 前言PyInstaller可以用来打包python应用程序,打包完的程序就可以在没有安装Python解释器的机器上运行了。PyInstall
- 多元函数拟合。如 电视机和收音机价格多销售额的影响,此时自变量有两个。python 解法:import numpy as npimport
- 一、协程设计-GMP模型线程是操作系统调度到CPU中执行的基本单位,多线程总是交替式地抢占CPU的时间片,线程在上下文的切换过程中需要经过操
- 前面介绍了关于用户账户的User表,但是现实生活中随着问题的复杂化数据库存储的数据不可能这么简单,让我们设想有另外一张表,这张表和User有
- 神经网络框架使用方法及设计思想在框自己手写架上基本模仿pytorch,用以学习神经网络的基本算法,如前向传播、反向传播、各种层、各种激活函数
- 昨天用ucweb看到了goos发的一篇帖子:谁说Float菜单不可以水平居中,进去看了看,觉得方法有点繁琐了,用到了负边距,position
- 存储过程,可以这样认为,将我们需要特殊处理的sql语句封装成函数,当需要的时候我们只需调用这个函数就可以实现我们想要的操作,这个过程我们可以
- 知识点这次我们使用python来打造一款间谍程序程序中会用到许多知识点,大致分为四块win32API 此处可以在MSDN上查看Python基