2024年vue中的 vxe-table表格插件 实现树形数据表，老板泪流满面的时候

在Vue中使用vxe-table插件实现树形数据表，你需要确保已经安装了vxe-table和对应的树形插件。以下是一个简单的实现示例：

1. 安装vxe-table和对应的树形插件：

npm install xe-utils vxe-table

2. 在Vue组件中引入vxe-table和树形插件：

import Vue from 'vue'
import 'vxe-table/lib/style.css'
import VXETable from 'vxe-table'
import VXETablePluginTreeGenealogy from 'vxe-table-plugin-tree-genealogy'
 
Vue.use(VXETable, VXETablePluginTreeGenealogy)

3. 在组件的模板中添加vxe-table组件并设置为树形展示：

<template>
  <vxe-table
    :tree-config="{children: 'children'}"
    :data="tableData">
    <vxe-table-column field="name" title="名称"></vxe-table-column>
    <vxe-table-column field="size" title="大小"></vxe-table-column>
    <vxe-table-column field="date" title="日期"></vxe-table-column>
  </vxe-table>
</template>

4. 在组件的script标签中定义tableData：

export default {
  data () {
    return {
      tableData: [
        {
          id: 1,
          name: '文件夹1',
          size: '--',
          date: '2023-01-01',
          children: [
            {
              id: 2,
              name: '文件1.txt',
              size: '100KB',
              date: '2023-01-01'
            },
            // 更多子项...
          ]
        },
        // 更多根项...
      ]
    }
  }
}

确保你的树形数据中每个项都有一个唯一的id字段，并且通过children属性来标识子级数据。这样vxe-table就可以识别并以树形展示你的数据。