vue实现table

Vue 实现 Table 的基本方法

使用原生 HTML 表格

通过 Vue 的 v-for 指令动态渲染表格数据，适合简单场景。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'name', title: '姓名' },
        { key: 'age', title: '年龄' }
      ],
      data: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  }
}
</script>

使用第三方组件库

推荐使用成熟的 UI 库如 Element UI、Ant Design Vue 等，提供丰富的表格功能（排序、分页、筛选等）。

Element UI 示例：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '王五' },
        { date: '2023-01-02', name: '赵六' }
      ]
    }
  }
}
</script>

高级功能实现

动态列与自定义渲染

通过 scoped slots 实现复杂单元格内容渲染。

<template>
  <table>
    <tr v-for="row in data" :key="row.id">
      <td v-for="col in columns" :key="col.key">
        <slot :name="`cell-${col.key}`" :row="row">
          {{ row[col.key] }}
        </slot>
      </td>
    </tr>
  </table>
</template>

分页控制

结合分页组件实现数据分段加载。

<template>
  <div>
    <table>...</table>
    <el-pagination 
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  }
}
</script>

性能优化建议

对于大数据量场景，建议使用虚拟滚动技术（如 vue-virtual-scroller）避免 DOM 节点过多导致的性能问题。

<template>
  <RecycleScroller
    :items="data"
    :item-size="50"
    key-field="id">
    <template v-slot="{ item }">
      <tr>
        <td>{{ item.name }}</td>
      </tr>
    </template>
  </RecycleScroller>
</template>