vue如何实现一个懒加载的树状表格
实现一个树状表格,需要用到vxe-table这个库,虽然element-ui也能实现,但这个库是专门针对表格做了更多的拓展,功能更多一些。接下来,说一下使用方式。安装npm install xe-utils vxe-table// 入口文件引入,一般是main.jsimport Vue from 'vue'import 'xe-utils'import VXETable from 'vxe-tab
·
实现一个树状表格,需要用到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);
});
});
}
}
};
更多推荐
已为社区贡献6条内容
所有评论(0)