vue如何实现一个懒加载的树状表格

实现一个树状表格，需要用到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);
                    });
            });
        }
    }
};