vue实现tree-grid

实现 Tree-Grid 的基本思路

在 Vue 中实现 Tree-Grid（树形表格）通常需要结合树形结构和表格布局的功能。可以通过递归组件或第三方库来实现。

使用递归组件实现

递归组件是 Vue 中实现树形结构的常见方式。通过组件调用自身，可以动态渲染嵌套的树形数据。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tree-grid-row
        v-for="item in data"
        :key="item.id"
        :item="item"
        :columns="columns"
        :children-field="childrenField"
      />
    </tbody>
  </table>
</template>

<script>
import TreeGridRow from './TreeGridRow.vue';

export default {
  name: 'TreeGrid',
  components: { TreeGridRow },
  props: {
    data: { type: Array, required: true },
    columns: { type: Array, required: true },
    childrenField: { type: String, default: 'children' },
  },
};
</script>

在 TreeGridRow 组件中实现递归渲染：

<template>
  <tr>
    <td v-for="column in columns" :key="column.key">
      {{ item[column.key] }}
    </td>
  </tr>
  <template v-if="item[childrenField] && item[childrenField].length">
    <tree-grid-row
      v-for="child in item[childrenField]"
      :key="child.id"
      :item="child"
      :columns="columns"
      :children-field="childrenField"
    />
  </template>
</template>

<script>
export default {
  name: 'TreeGridRow',
  props: {
    item: { type: Object, required: true },
    columns: { type: Array, required: true },
    childrenField: { type: String, default: 'children' },
  },
};
</script>

使用第三方库

如果不想手动实现，可以使用成熟的第三方库，例如：

• vue-table-with-tree-grid：专为 Vue 设计的树形表格组件。
• element-ui 的 el-table：通过 row-key 和 tree-props 支持树形结构。

以 element-ui 为例：

<template>
  <el-table
    :data="data"
    row-key="id"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="value" label="Value" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          name: 'Parent',
          value: 'Parent Value',
          children: [
            { id: 2, name: 'Child', value: 'Child Value' },
          ],
        },
      ],
    };
  },
};
</script>

添加展开/折叠功能

在手动实现的递归组件中，可以通过 v-if 或 v-show 控制子节点的显示与隐藏：

<template>
  <tr>
    <td>
      <button @click="toggle">
        {{ isExpanded ? '−' : '+' }}
      </button>
      {{ item.name }}
    </td>
    <td>{{ item.value }}</td>
  </tr>
  <tr v-if="isExpanded && item.children">
    <td colspan="2">
      <table>
        <tree-grid-row
          v-for="child in item.children"
          :key="child.id"
          :item="child"
        />
      </table>
    </td>
  </tr>
</template>

<script>
export default {
  name: 'TreeGridRow',
  props: {
    item: { type: Object, required: true },
  },
  data() {
    return {
      isExpanded: false,
    };
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

样式优化

为树形表格添加缩进效果，可以通过 CSS 控制：

.tree-grid-row td:first-child {
  padding-left: calc(var(--level) * 20px);
}

在组件中动态绑定缩进层级：

<tr :style="`--level: ${level}`">
  <!-- ... -->
</tr>

通过以上方法，可以实现一个功能完整的 Tree-Grid 组件。