vue表格动态实现

动态表格实现方法

在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, index) in data" :key="index">
        <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: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    }
  }
}
</script>

动态列配置

支持通过外部传入动态列配置：

props: {
  columns: {
    type: Array,
    required: true
  },
  dataSource: {
    type: Array,
    default: () => []
  }
}

自定义单元格渲染

使用插槽实现复杂单元格内容：

<td v-for="col in columns" :key="col.key">
  <slot name="cell" :row="row" :col="col">
    {{ row[col.key] }}
  </slot>
</td>

响应式更新

当数据变化时自动更新表格：

watch: {
  dataSource(newVal) {
    this.internalData = [...newVal]
  }
}

性能优化

对于大数据量表格使用虚拟滚动：

<virtual-scroller :items="data" :item-height="50">
  <template v-slot="{ item }">
    <tr>
      <td v-for="col in columns" :key="col.key">{{ item[col.key] }}</td>
    </tr>
  </template>
</virtual-scroller>

高级功能实现

动态列显示控制

添加列显示切换功能：

computed: {
  visibleColumns() {
    return this.columns.filter(col => col.visible !== false)
  }
}

排序功能

实现列排序：

methods: {
  sortBy(col) {
    this.data.sort((a, b) => a[col.key] > b[col.key] ? 1 : -1)
  }
}

分页处理

添加分页逻辑：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize
    return this.data.slice(start, start + this.pageSize)
  }
}

第三方组件集成

对于复杂需求，可以使用现成表格组件库：

import { ElTable } from 'element-ui'

// 或
import { VDataTable } from 'vuetify'

这些方法可以根据实际需求组合使用，构建出功能丰富的动态表格组件。