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 實(shí)例掛載全局窗口對(duì)象，屬性名稱隨意定義，例如：$XModal
// Vue.prototype.$modal = VXETable.modal

<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="同步狀態(tài)" :formatter="formatStatus" />
? ? ? ? ?</vxe-table>
? ? </div>
</template>

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}個(gè)樹形節(jié)點(diǎn)`, records);
        },
        formatStatus({ cellValue, row, column }) { // 格式化方法
			return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
        },
        loadChildrenMethod({ row }) { // 加載子節(jié)點(diǎn)
        	/**
        	* @desc: 這里必須返回一個(gè)promise對(duì)象，把結(jié)果通過resolve返回。
        	* 因?yàn)樵创a返回的是一個(gè)promise，如果我們的結(jié)果不是promise就會(huì)報(bào)錯(cuò)。
        	* `xxxx catch is undefind` cathc的報(bào)錯(cuò)。
        	* 當(dāng)時(shí)腦闊痛了好久。
        	*/
            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
? ref="refTable"
? :data="tableData"
? :load="loadOrgTable"
? :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
? row-key="orgId"
? lazy
? @expand-change="expandChange"
>
</el-table>

mounted() {
? ? // 2.15.3 版本修復(fù)了這個(gè)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;
? ? ? ? ? // 修復(fù)快速切換數(shù)據(jù)時(shí)報(bào)錯(cuò)?
? ? ? ? ? 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);
? ? ? ? });
? ? ? }
? ? }
? },

?resetLazyTree() { ??
?? ?// 單獨(dú)設(shè)置這個(gè)是無效的，大坑~ 一定要清空孩子，否則loadOrgTable返回?cái)?shù)據(jù)在沒有孩子的情況下會(huì)顯示上次的孩子節(jié)點(diǎn)
?? ?this.tableData = []?
?? ?this.$set(this.$refs.refTable.store.states, 'lazyTreeNodeMap', {})
},

// 對(duì) Table 進(jìn)行重新布局
refreshTableLayout() {
? ?this.$nextTick(() => {
? ? ?this.$refs.refTable.doLayout()
? ?})
},

this.tableData = [{
	orgId: 1,
	orgName: '銀行境內(nèi)機(jī)構(gòu)匯總',
	hasChildren: true,
	indData: [
		{
			name："名字1",
			a: '--',
			b: '--',
		}，
		{
			name："2",
			a: '--',
			b: '--',
		}，
	],
	children: [],
}]