当前位置：首页 > VUE

vue怎么实现动态表格

2026-02-24 17:20:37VUE

Vue 动态表格实现方法

基于 `v-for` 的数据驱动渲染

通过 v-for 指令循环渲染表格行和列，数据变化时表格自动更新：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '职业'],
      tableData: [
        ['张三', 25, '工程师'],
        ['李四', 30, '设计师']
      ]
    }
  }
}
</script>

动态列配置

使用计算属性处理动态列显示逻辑：

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

模板部分适配动态列：

<th v-for="col in visibleColumns" :key="col.prop">{{ col.label }}</th>
<td v-for="col in visibleColumns" :key="col.prop">{{ row[col.prop] }}</td>

可编辑表格实现

通过 v-model 绑定单元格数据：

vue怎么实现动态表格

<td v-for="col in columns" :key="col.prop">
  <input v-if="col.editable" v-model="row[col.prop]">
  <span v-else>{{ row[col.prop] }}</span>
</td>

动态行操作

添加行删除功能示例：

methods: {
  removeRow(index) {
    this.tableData.splice(index, 1)
  }
}

模板中添加操作按钮：

vue怎么实现动态表格

<td>
  <button @click="removeRow(rowIndex)">删除</button>
</td>

使用第三方组件库

Element UI 实现示例：

<el-table :data="tableData">
  <el-table-column v-for="col in columns" 
                   :prop="col.prop" 
                   :label="col.label"
                   :key="col.prop">
  </el-table-column>
</el-table>

性能优化建议

大数据量时使用虚拟滚动：

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

动态表头合并

复杂表头处理示例：

<thead>
  <tr>
    <th :colspan="2">基本信息</th>
    <th :colspan="3">详细信息</th>
  </tr>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>部门</th>
    <th>职位</th>
    <th>入职日期</th>
  </tr>
</thead>