vue实现树形表格数据

vue实现树形表格数据

在Vue中实现树形表格数据通常需要结合递归组件或第三方库。以下是几种常见方法：

使用递归组件

递归组件是Vue中处理树形结构的核心方法。创建一个可自调用的组件来渲染嵌套数据。

<template>
  <table>
    <tbody>
      <tree-row v-for="(item, index) in treeData" :key="index" :item="item" />
    </tbody>
  </table>
</template>

<script>
export default {
  components: {
    TreeRow: {
      template: `
        <tr>
          <td>{{ item.name }}</td>
          <td v-if="item.children">
            <table>
              <tbody>
                <tree-row v-for="(child, i) in item.children" :key="i" :item="child" />
              </tbody>
            </table>
          </td>
        </tr>
      `,
      props: ['item']
    }
  },
  data() {
    return {
      treeData: [
        {
          name: 'Parent',
          children: [
            { name: 'Child 1' },
            { name: 'Child 2' }
          ]
        }
      ]
    }
  }
}
</script>

使用element-ui的el-table

element-ui提供了内置的树形表格支持，通过设置row-key和tree-props属性即可实现。

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="value" label="值"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        name: '一级',
        children: [{
          id: 2,
          name: '二级',
          value: 'value'
        }]
      }]
    }
  }
}
</script>

使用vue-table-with-tree-grid插件

专门为Vue设计的树形表格插件，提供开箱即用的功能。

import Vue from 'vue'
import TreeTable from 'vue-table-with-tree-grid'

Vue.use(TreeTable)

<template>
  <tree-table
    :data="treeData"
    :columns="columns"
    expand-key="name">
  </tree-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { label: '名称', prop: 'name' },
        { label: '值', prop: 'value' }
      ],
      treeData: [
        {
          name: 'Parent',
          value: '',
          children: [
            { name: 'Child', value: '123' }
          ]
        }
      ]
    }
  }
}
</script>

自定义展开/折叠功能

对于更复杂的需求，可以手动实现展开/折叠逻辑。

<template>
  <table>
    <tbody>
      <tr v-for="item in flattenedData" :key="item.id">
        <td @click="toggleExpand(item)">
          {{ '→'.repeat(item.level) }} {{ item.name }}
        </td>
        <td>{{ item.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Parent',
          children: [
            { id: 2, name: 'Child', value: 'test' }
          ]
        }
      ],
      expandedIds: [1]
    }
  },
  computed: {
    flattenedData() {
      const flatten = (nodes, level = 0) => {
        return nodes.reduce((acc, node) => {
          acc.push({ ...node, level, isExpanded: this.expandedIds.includes(node.id) })
          if (node.children && this.expandedIds.includes(node.id)) {
            acc.push(...flatten(node.children, level + 1))
          }
          return acc
        }, [])
      }
      return flatten(this.treeData)
    }
  },
  methods: {
    toggleExpand(item) {
      const index = this.expandedIds.indexOf(item.id)
      if (index > -1) {
        this.expandedIds.splice(index, 1)
      } else {
        this.expandedIds.push(item.id)
      }
    }
  }
}
</script>

每种方法适用于不同场景，递归组件适合简单需求，element-ui提供企业级解决方案，而自定义实现则提供最大灵活性。根据项目复杂度和需求选择合适的实现方式。