SOURCE

var Main = {
  data () {
        return {
            tableData: [
                {
                    id: 10000,
                    parentId: null,
                    name: 'test abc1',
                    type: 'mp3',
                    size: 1024,
                    date: '2020-08-01',
                },
                {
                    id: 10050,
                    parentId: null,
                    name: 'Test2',
                    type: 'mp4',
                    size: 0,
                    date: '2021-04-01',
                },
                {
                    id: 24300,
                    parentId: 10050,
                    name: 'Test3',
                    type: 'avi',
                    size: 1024,
                    date: '2020-03-01',
                },
                {
                    id: 20045,
                    parentId: 24300,
                    name: 'test abc4',
                    type: 'html',
                    size: 600,
                    date: '2021-04-01',
                },
                {
                    id: 10053,
                    parentId: 24300,
                    name: 'test abc96',
                    type: 'avi',
                    size: 0,
                    date: '2021-04-01',
                },
                {
                    id: 24330,
                    parentId: 10053,
                    name: 'test abc5',
                    type: 'txt',
                    size: 25,
                    date: '2021-10-01',
                },
                {
                    id: 21011,
                    parentId: 10053,
                    name: 'Test6',
                    type: 'pdf',
                    size: 512,
                    date: '2020-01-01',
                },
                {
                    id: 22200,
                    parentId: 10053,
                    name: 'Test7',
                    type: 'js',
                    size: 1024,
                    date: '2021-06-01',
                },
                {
                    id: 23666,
                    parentId: null,
                    name: 'Test8',
                    type: 'xlsx',
                    size: 2048,
                    date: '2020-11-01',
                },
                {
                    id: 23677,
                    parentId: 23666,
                    name: 'Test7',
                    type: 'js',
                    size: 1024,
                    date: '2021-06-01',
                },
                {
                    id: 23671,
                    parentId: 23677,
                    name: 'Test7',
                    type: 'js',
                    size: 1024,
                    date: '2021-06-01',
                },
                {
                    id: 23672,
                    parentId: 23677,
                    name: 'Test7',
                    type: 'js',
                    size: 1024,
                    date: '2021-06-01',
                },
                {
                    id: 23688,
                    parentId: 23666,
                    name: 'Test7',
                    type: 'js',
                    size: 1024,
                    date: '2021-06-01',
                },
                {
                    id: 23681,
                    parentId: 23688,
                    name: 'Test7',
                    type: 'js',
                    size: 1024,
                    date: '2021-06-01',
                },
                {
                    id: 23682,
                    parentId: 23688,
                    name: 'Test7',
                    type: 'js',
                    size: 1024,
                    date: '2021-06-01',
                },
                {
                    id: 24555,
                    parentId: null,
                    name: 'test abc9',
                    type: 'avi',
                    size: 224,
                    date: '2020-10-01',
                },
                {
                    id: 24566,
                    parentId: 24555,
                    name: 'Test7',
                    type: 'js',
                    size: 1024,
                    date: '2021-06-01',
                },
                {
                    id: 24577,
                    parentId: 24555,
                    name: 'Test7',
                    type: 'js',
                    size: 1024,
                    date: '2021-06-01',
                }
            ]
        }
    }
};
var app = new Vue(Main).$mount('#app')

<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-pc-ui@3.6.30"></script>
<script src="https://unpkg.com/vxe-table@3.15.45"></script>

<div id="app">
  <template>
    <div>
        <vxe-table
            ref="tableRef"
            :column-config="{ resizable: true }"
            :tree-config="{
                transform: true,
                rowField: 'id',
                parentField: 'parentId'
            }"
            :data="tableData"
            :checkbox-config="{
                labelField: 'id',
                highlight: true
            }"
        >
            <vxe-column type="checkbox" title="ID" width="280" tree-node></vxe-column>
            <vxe-column field="name" title="Name"></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.6.28/lib/style.css");
@import url("https://unpkg.com/vxe-table@3.15.44/lib/style.css");