SOURCE

var Main = {
     data () {
    return {
        tableData: [
        { id: 1000, name: 'vxe-table 从入门到放弃1', type: 'mp3', size: 1024, date: '2020-08-01' },
        {
            id: 1005,
            name: 'Test2',
            type: 'mp4',
            size: null,
            date: '2021-04-01',
            children: [
            { id: 24300, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
            { id: 20045, name: 'vxe-table 从入门到放弃4', type: 'html', size: 600, date: '2021-04-01' },
            {
                id: 10053,
                name: 'vxe-table 从入门到放弃96',
                type: 'avi',
                size: null,
                date: '2021-04-01',
                children: [
                    { id: 24330, name: 'vxe-table 从入门到放弃5', type: 'txt', size: 25, date: '2021-10-01' },
                    { id: 21011, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
                    { id: 22200, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }
                ]
            }
            ]
        },
        { id: 23666, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
        { id: 24555, name: 'vxe-table 从入门到放弃9', type: 'avi', size: 224, date: '2020-10-01' }
        ]
    }
    },
    methods: {
    removeRowEvent (row) {
        this.$XModal.confirm('您确定要删除吗？').then(type => {
        if (type === 'confirm') {
            const matchObj = XEUtils.findTree(this.tableData3, item => item === row, this.treeConfig)
            if (matchObj) {
            // 从树节点中移除
            matchObj.items.splice(matchObj.index, 1)
            }
        }
        })
    }
    },
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>

<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script> -->
<script src="https://unpkg.com/vxe-table/lib/index.umd.js"></script>
<link rel="stylesheet" href=" https://unpkg.com/vxe-table/lib/index.css">
<div id="app">
  <template>
       <vxe-table
          show-overflow
          highlight-hover-row
          row-key
          ref="erpTable"
          border="inner"
          :show-header="false"
          :data="tableData"
          :checkbox-config="{ labelField: 'name' }"
          :tree-config="{children: 'children', accordion: true, line: true, iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}">
          <vxe-table-column type="checkbox" tree-node>
            <template #default="{ row }">
              <span>
                <!-- 
                    有展开数据的图标
                <template v-if="row.children && row.children.length">
                  <i class="tree-node-icon fa" :class="$refs.erpTable.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'"></i>
                </template>
                <template v-else>
                    没展开数据的图标
                  <i class="tree-node-icon fa fa-file-o"></i>
                </template> 
                
                -->
                <span>{{ row.name }}</span>
              </span>
            </template>
          </vxe-table-column>
          <!-- <vxe-table-column title="操作" width="140">
            <template #default="{ row }">
              <vxe-button type="text" icon="fa fa-eye"></vxe-button>
              <vxe-button type="text" icon="fa fa-edit"></vxe-button>
              <vxe-button type="text" icon="fa fa-trash-o" @click="removeRowEvent(row)"></vxe-button>
              <vxe-button type="text" icon="fa fa-id-card-o"></vxe-button>
            </template>
          </vxe-table-column> -->
        </vxe-table>
  </template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table@3.3.1/lib/style.css");
@import url("https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.css");
.tree-node-icon {
    width: 24px;
    text-align: center;
}