SOURCE

var Main = {
    data() {
        return {
            tableDataSSS: [
                { id: 10000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
                { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01', hasChild: true },
                { id: 23666, parentId: null, name: 'Test23', type: 'mp4', size: null, date: '2021-01-02', hasChild: true },
                { id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' }
            ]
        }
    },
    methods: {
        action() {
            // const tableDataSSS = [
            //     { id: 10000, parentId: null, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01', hasChild: true },
            //     { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01', hasChild: true },
            //     { id: 23666, parentId: null, name: 'Test23', type: 'mp4', size: null, date: '2021-01-02', hasChild: true },
            //     { id: 24555, parentId: null, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01', hasChild: true }
            // ]
            // this.$refs.xTree.clearRowExpandLoaded(this.$refs.xTree.getTreeExpandRecords())
            // this.$refs.xTree.loadData(tableDataSSS);
            // console.log(this.tableDataSSS[0])
            // this.$refs.xTree.reloadTreeExpand(this.tableDataSSS[1])
            this.$refs.xTree.reloadTreeExpand(this.tableDataSSS[2]).then((e) => {
                        console.log('节点已重新加载并展开', Date.now());
                        return e
                    });
            // this.tableDataSSS.push({ id: this.tableDataSSS[0].id + 100000, parentId: this.tableDataSSS[0].id, name: this.tableDataSSS[0].name + 'Test45', type: 'mp4', size: null, date: '2021-10-03', hasChild: true })
        },
        // 懒加载,将数据返回
        loadChildrenMethod({ row }) {
            // 异步加载子节点
            return new Promise(resolve => {
                setTimeout(() => {
                    const childs = [
                        { id: row.id + 100000, parentId: row.id, name: row.name + 'Test45', type: 'mp4', size: null, date: '2021-10-03', hasChild: true },
                        { id: row.id + 150000, parentId: row.id, name: row.name + 'Test56', type: 'mp3', size: null, date: '2021-07-09', hasChild: false }
                    ]
                    console.log('懒加载完成', Date.now())
                    resolve(childs)
                }, 2000)
            })
        },
    },
    created() {
    }
};
var app = new Vue(Main).$mount('#app')

<script src="https://unpkg.com/vue@2.7.16"></script>
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-pc-ui@3.3.11"></script>
<script src="https://unpkg.com/vxe-table@3.11.11"></script>

<div id="app">
  <template>
    <div>
        <button @click='action'>按钮</button>
      <p>Table 演示</p>
      <vxe-table border resizable ref="xTree"
      :tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', lazy: true, hasChild: 'hasChild', loadMethod: loadChildrenMethod }"
      :data="tableDataSSS"  :row-config="{keyField: 'id'}">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name" width="400" tree-node></vxe-column>
      <vxe-column field="size" title="Size"></vxe-column>
      <vxe-column field="type" title="Type"></vxe-column>
      <vxe-column field="date" title="Date"></vxe-column>
    </vxe-table>
    </div>
  </template>
</div>

@import url("https://unpkg.com/vxe-pc-ui@3.3.11/lib/style.css");
@import url("https://unpkg.com/vxe-table@3.11.11/lib/style.css");