vue 表格懒加载,vue树形表格
这篇文章主要介绍了某视频剪辑软件实现一个懒加载的树状表格实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
一个懒加载的树状表格实例安装模板射流研究…代码使用埃尔表懒加载树形表格时的注意点1、版本问题2、数据显示3、滚动条4、数据结构5、电子表格的固定的；不变的导致的问题
一个懒加载的树状表格实例
实现一个树状表格，需要用到基于虚拟化解决方案表这个库，虽然元素-用户界面也能实现，但这个库是专门针对表格做了更多的拓展，功能更多一些。
接下来，说一下使用方式。
安装
新公共管理安装xe-utils vxe-表
//入口文件引入，一般是主页。射流研究…
从“vue”导入某视频剪辑软件
导入 xe-utils
从" vxe表格"导入VXETable
导入 vxe-table/lib/index.css
Vue.use(VXETable)
//给某视频剪辑软件实例挂载全局窗口对象，属性名称随意定义，例如：$XModal
//vue。原型。$ modal=vxe表。情态的
模板
要实现懒加载，树形配置配置参数如下：
懒惰：懒加载哈斯尔德：是否有子节点，值应为布尔值。为真实的则加载儿童儿童：映射的要加载的子节点集合加载方法：实现加载子节点的方式模板
差异
基于虚拟化解决方案表
可调整大小的
row-id=id
:tree-config={lazy: true，children: children ，hasChild: hasNaxt ，loadMethod: loadChildrenMethod}
:data=tableData
:checkbox-config= { label field: orgName ，highlight: true }
@ checkbox-change= selectChangeEvent
vxe-table-column type= seq title= ID width= 100 /
vxe-table-column field= orgName title=组织名称type=checkbox 树节点/
vxe-table-column field= orgId title=企微组织编码 /
vxe-table-column field= status title=同步状态：formatter=formatStatus /
/vxe-table
/div
/模板
js代码
导出默认值{
data() {
返回{
表数据：[],
加载：假
};
},
已安装(){
//this.tableData=window .模拟树数据列表；
这个。$巴士在(上的.发送，数据={
这个。表数据=[数据]；
});
},
方法：{
selectChangeEvent({ records }){//复选框选中事件
控制台。信息(` o勾选${records.length}个树形节点`,记录);
},
formatStatus({ cellValue，row，column }) { //格式化方法
返回xeutils。toda testring(单元格值， yyyy-MM-dd HH:ss:mm )
},
loadChildrenMethod({ row }) { //加载子节点
/**
* @desc:这里必须返回一个承诺对象，把结果通过分解返回。
* 因为源码返回的是一个承诺，如果我们的结果不是承诺就会报错。
* `xxxx catch未找到卡斯的报错。
* 当时脑阔痛了好久。
*/
返回新承诺((解决，拒绝)={
这个10.99美元axios。get(`/test/MD porg/work weixin/query children？id=${row.id} `)。然后(res={
设arr=研究数据。儿童；
解决(arr)；
});
});
}
}
};
使用el-table懒加载树形表格时的注意点
先放个简单的埃尔表例子
埃尔表
ref=refTable
:data=tableData
:load=loadOrgTable
:tree-props= { children: children ，hasChildren: hasChildren}
row-key=orgId
懒惰的
@expand-change=expandChange
/el-table
1、版本问题
埃尔表懒加载执行两次，加载未取消的bug，后面升级版本即可。不升级的情况下可以如下面处理。
已安装(){
//2.15.3 版本修复了这个bug，目前版本没有更新https://github.com/ElemeFE/element/pull/21041
这个参考文献。参考表。商店。load data=function(row，key，treeNode){
const { load }=this.table
const { treeData:raw treeData }=this。国家；
如果(加载！rawTreeData[key]。已加载){
rawTreeData[key]。loading=true
load(row，treeNode，data={
如果(！Array.isArray(data)) {
抛出新错误(“[ElTable]数据必须是数组”)；
}
const { lazyTreeNodeMap，treeData }=this.states
//修复快速交换数据时报告错误
如果(！treeData[key]) {
返回
}
treeData[key]。loading=false
treeData[key]。loaded=true
treeData[key]。expanded=true
if (data.length) {
这个。$set(lazyTreeNodeMap，key，data)；
}
this . table . $ emit( expand-change ，row，true)；
});
}
}
},
2、数据显示
1.tableData是开头的数据，load懒加载的数据不会在tableData中。
2.设置tableData=[]不会清空树中的数据。如果下一次延迟加载返回一个空数组，最后的数据将显示在页面上。(如果此时点击下载数据，下载的内容将与表格显示不一致)
resetLazyTree() {
//单独设置这个无效，大坑~一定要清空子节点，否则loadOrgTable返回的数据会显示最后一个没有子节点的子节点。
this.tableData=[]
这个。$set(这个。$refs.refTable.store.states， lazyTreeNodeMap ，{})
},
3.有时候表格下面多了一个空行，或者加载树型表格的子节点时，可能会出现滚动条，导致行错位。
您可以再次尝试刷新表格布局。
//重新布局表格
refreshTableLayout() {
这个。$nextTick(()={
这个。$refs.refTable.doLayout()
})
},
3、滚动条
如果不改变这个默认滚动条的样式，问题会少很多。
例如，如果滚动条的宽度更改为当前宽度的一半，则最后一行的第一列文本将被阻挡一半。
暂时先放着这个，等有了好的解决办法再回来。
4、数据结构
对于具有双标题的表，数据结构可以如下：
this.tableData=[{
orgId: 1，
机构名称，境内机构银行汇总:
hasChildren:没错，
indData: [
{
名称：“名称1”，
答：-，
乙：-，
},
{
名称：“2”，
答：-，
乙：-，
},
],
孩子：[]，
}]
如果先渲染名称列的表头，那么接口indData中的顺序必须遵循名称的顺序，否则会出现数据混乱。
5、el-table的fixed导致的问题
场景：使用excelJs的DOM类型下载来下载表中的数据。获取下载的el-table数据后，发现表页中有两份相同的数据。
原因：设置fixed后，el-table渲染的结构中有两个表。
解决方法：通过$refs获取虚拟dom，只删除第二个表的dom。这里不能获取真正的dom，否则页面会受到影响。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。