炫出你的代码能力：vue-element-admin轻松集成vxe-table，打造多维树形表格

2024-01-01 19:03:40

在当今数字时代，数据的呈现方式变得越来越重要。树形表格以其清晰的层次结构和强大的可视化效果，在数据展示领域备受青睐。使用vue-element-admin和vxe-table，我们能够轻松地构建一个功能齐全的多维树形表格，让数据一目了然。

1. 引入vxe-table

首先，我们需要在vue-element-admin项目中引入vxe-table。打开项目根目录下的package.json文件，添加以下依赖：

"dependencies": {
  "vxe-table": "^4.9.1"
}

然后，在main.js文件中引入vxe-table：

import Vue from 'vue'
import App from './App.vue'
import vxeTable from 'vxe-table'

Vue.use(vxeTable)

new Vue({
  render: h => h(App)
}).$mount('#app')

2. 创建树形表格组件

接下来，我们需要创建一个树形表格组件。在项目src目录下创建一个名为TreeTable.vue的文件，并添加以下代码：

<template>
  <vxe-table
    :data="tableData"
    :tree-config="treeConfig"
    :height="400"
  >
    <vxe-column prop="name" label="名称" />
    <vxe-column prop="size" label="大小" />
    <vxe-column prop="type" label="类型" />
  </vxe-table>
</template>

<script>
import { ref } from 'vue'
import { vxeTable } from 'vxe-table'

export default {
  components: {
    vxeTable
  },
  setup() {
    const tableData = ref([
      {
        name: '文件夹1',
        size: '100KB',
        type: '文件夹',
        children: [
          {
            name: '文件1',
            size: '10KB',
            type: '文件'
          },
          {
            name: '文件2',
            size: '20KB',
            type: '文件'
          }
        ]
      },
      {
        name: '文件夹2',
        size: '200KB',
        type: '文件夹',
        children: [
          {
            name: '文件3',
            size: '30KB',
            type: '文件'
          },
          {
            name: '文件4',
            size: '40KB',
            type: '文件'
          }
        ]
      }
    ])

    const treeConfig = ref({
      children: 'children'
    })

    return {
      tableData,
      treeConfig
    }
  }
}
</script>

3. 注册树形表格组件

接下来，我们需要在App.vue文件中注册树形表格组件：

<template>
  <div>
    <TreeTable />
  </div>
</template>

<script>
import TreeTable from './TreeTable.vue'

export default {
  components: {
    TreeTable
  }
}
</script>