vue实现树表

Vue 实现树表的方法

在 Vue 中实现树表（Tree Table）可以通过多种方式完成，以下是一些常见的方法和步骤：

使用第三方库

Element UI、Ant Design Vue 等流行的 UI 框架提供了现成的树表组件，可以直接使用。例如，Element UI 的 el-table 结合 el-tree 可以实现树表功能。

安装 Element UI：

npm install element-ui

引入并使用树表组件：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          hasChildren: true
        }
      ]
    }
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ])
      }, 1000)
    }
  }
}
</script>

自定义树表组件

如果没有使用第三方库的需求，可以自定义树表组件。通过递归组件的方式实现树形结构。

定义树表组件：

<template>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tree-row
        v-for="(item, index) in data"
        :key="index"
        :item="item"
        @toggle="toggle"
      ></tree-row>
    </tbody>
  </table>
</template>

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

export default {
  components: { TreeRow },
  props: {
    data: Array
  },
  methods: {
    toggle(item) {
      item.expanded = !item.expanded
    }
  }
}
</script>

定义树行组件（递归组件）：

<template>
  <tr>
    <td>
      <span @click="toggle" v-if="item.children">
        {{ item.expanded ? '-' : '+' }}
      </span>
      {{ item.name }}
    </td>
    <td>
      <button @click="edit">编辑</button>
    </td>
  </tr>
  <tr v-if="item.expanded && item.children">
    <td colspan="2">
      <tree-table :data="item.children"></tree-table>
    </td>
  </tr>
</template>

<script>
export default {
  name: 'TreeRow',
  props: {
    item: Object
  },
  methods: {
    toggle() {
      this.$emit('toggle', this.item)
    },
    edit() {
      this.$emit('edit', this.item)
    }
  }
}
</script>

使用 Vue 递归组件

递归组件是 Vue 中实现树形结构的常见方法。通过组件调用自身，可以轻松实现多层嵌套的树表。

定义递归组件：

<template>
  <ul>
    <li v-for="(item, index) in treeData" :key="index">
      {{ item.name }}
      <tree-node v-if="item.children" :treeData="item.children"></tree-node>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    treeData: Array
  }
}
</script>

在父组件中使用：

<template>
  <div>
    <tree-node :treeData="treeData"></tree-node>
  </div>
</template>

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

export default {
  components: { TreeNode },
  data() {
    return {
      treeData: [
        {
          name: '节点1',
          children: [
            {
              name: '节点1-1',
              children: []
            }
          ]
        }
      ]
    }
  }
}
</script>

使用虚拟滚动优化性能

对于大型树表数据，可以使用虚拟滚动技术优化性能。例如，使用 vue-virtual-scroll-list 库。

安装库：

npm install vue-virtual-scroll-list

使用示例：

<template>
  <virtual-list
    :size="40"
    :remain="10"
    :data="treeData"
  >
    <template v-slot="{ item }">
      <div>
        {{ item.name }}
      </div>
    </template>
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'

export default {
  components: { VirtualList },
  data() {
    return {
      treeData: [
        { name: '节点1' },
        { name: '节点2' },
        // 更多数据...
      ]
    }
  }
}
</script>

通过以上方法，可以在 Vue 中灵活实现树表功能，根据需求选择适合的方案。