当前位置：首页 > VUE

vue实现链路表格

2026-01-21 16:28:29VUE

Vue 实现链路表格的方法

链路表格通常用于展示具有层级关系的数据，比如树形结构或依赖关系。以下是几种常见的实现方式：

使用递归组件实现树形表格

递归组件适合处理嵌套层级不确定的数据结构：

<template>
  <table>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <td>{{ item.name }}</td>
        <td>
          <tree-table v-if="item.children && item.children.length" :data="item.children"/>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'TreeTable',
  props: {
    data: Array
  }
}
</script>

使用 el-table 和 row-key 属性（Element UI）

Element UI 的表格组件支持树形数据展示：

<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: '子节点'
        }]
      }]
    }
  }
}
</script>

使用第三方库 vue-treetable

专门用于树形表格的 Vue 组件库：

npm install vue-treetable

<template>
  <treetable :data="treeData" :columns="columns"/>
</template>

<script>
import Treetable from 'vue-treetable'

export default {
  components: { Treetable },
  data() {
    return {
      treeData: [...],
      columns: [
        { label: '名称', field: 'name' },
        { label: '值', field: 'value' }
      ]
    }
  }
}
</script>

自定义展开/折叠功能

手动实现展开折叠功能：

<template>
  <table>
    <tr v-for="item in flattenedData" :key="item.id">
      <td :style="{ paddingLeft: (item.level * 20) + 'px' }">
        <span @click="toggleExpand(item)" v-if="item.children">
          {{ item.expanded ? '-' : '+' }}
        </span>
        {{ item.name }}
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      treeData: [...],
      flattenedData: []
    }
  },
  methods: {
    flattenData(data, level = 0, parentExpanded = true) {
      // 实现数据扁平化处理
    },
    toggleExpand(item) {
      // 切换展开状态
    }
  },
  created() {
    this.flattenedData = this.flattenData(this.treeData)
  }
}
</script>

使用 CSS 实现视觉层级

通过 CSS 表现层级关系：

<template>
  <table>
    <tr v-for="item in data" :key="item.id" :class="`level-${item.level}`">
      <td>{{ item.name }}</td>
    </tr>
  </table>
</template>

<style>
tr.level-1 td { padding-left: 20px; }
tr.level-2 td { padding-left: 40px; }
/* 更多层级样式 */
</style>