vue实现 treegrid

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

使用第三方库

Vue生态中有许多成熟的第三方库可以快速实现TreeGrid功能，例如：

• VxeTable：支持树形表格、虚拟滚动、动态加载等功能。

  <template>
    <vxe-table
      :data="treeData"
      :tree-config="{ children: 'children' }"
    >
      <vxe-column field="name" title="Name" tree-node></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-table>
  </template>
  
  <script>
  export default {
    data() {
      return {
        treeData: [
          {
            name: 'Parent',
            age: 40,
            children: [
              { name: 'Child 1', age: 10 },
              { name: 'Child 2', age: 12 }
            ]
          }
        ]
      }
    }
  }
  </script>

• Element UI的Table组件：通过row-key和tree-props配置实现树形表格。

  

  <template>
    <el-table
      :data="treeData"
      row-key="id"
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
  </template>

自定义递归组件

如果需要更灵活的定制，可以通过递归组件实现TreeGrid：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tree-row
        v-for="item in treeData"
        :key="item.id"
        :item="item"
      />
    </tbody>
  </table>
</template>

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

export default {
  components: { TreeRow },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Parent',
          age: 40,
          children: [
            { id: 2, name: 'Child 1', age: 10 },
            { id: 3, name: 'Child 2', age: 12 }
          ]
        }
      ]
    }
  }
}
</script>

在TreeRow.vue中递归渲染子节点：

<template>
  <tr>
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
  <tr v-if="item.children">
    <td colspan="2">
      <table>
        <tree-row
          v-for="child in item.children"
          :key="child.id"
          :item="child"
        />
      </table>
    </td>
  </tr>
</template>

<script>
export default {
  name: 'TreeRow',
  props: {
    item: Object
  }
}
</script>

动态加载与懒加载

对于大数据量的树形表格，可以通过动态加载优化性能：

<template>
  <vxe-table
    :data="treeData"
    :tree-config="{ lazy: true, loadMethod: loadChildren }"
  >
    <vxe-column field="name" title="Name" tree-node></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { name: 'Parent', id: 1, hasChildren: true }
      ]
    }
  },
  methods: {
    loadChildren({ row }) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            { name: 'Child 1', id: 2 },
            { name: 'Child 2', id: 3 }
          ])
        }, 500)
      })
    }
  }
}
</script>

样式与交互优化

• 通过CSS控制缩进和展开/折叠图标：

  .tree-node {
    padding-left: 20px;
    position: relative;
  }
  .tree-node:before {
    content: '+';
    position: absolute;
    left: 5px;
  }
  .tree-node.expanded:before {
    content: '-';
  }

• 添加展开/折叠事件：

  <template>
    <tr @click="toggleExpand(item)">
      <td>{{ item.name }}</td>
    </tr>
    <tr v-if="item.expanded && item.children">
      <td colspan="2">
        <tree-row v-for="child in item.children" :item="child" />
      </td>
    </tr>
  </template>
  
  <script>
  export default {
    methods: {
      toggleExpand(item) {
        this.$set(item, 'expanded', !item.expanded)
      }
    }
  }
  </script>

以上方法可以根据项目需求选择适合的方案，第三方库适合快速开发，而自定义组件则更适合高度定制的场景。