实现一个树状表格，需要用到vxe-table这个库，虽然element-ui也能实现，但这个库是专门针对表格做了更多的拓展，功能更多一些。
接下来，说一下使用方式。
安装
npm install xe-utils vxe-table
// 入口文件引入，一般是main.jsimport 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-tableresizablerow-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);});});}}};
