当前位置：首页 > VUE

vue动态表格实现

2026-01-15 07:49:10VUE

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>

动态添加/删除行

通过数组方法操作数据实现行增删功能：

methods: {
  addRow() {
    this.tableData.push(['新数据', 0, '未设置'])
  },
  deleteRow(index) {
    this.tableData.splice(index, 1)
  }
}

可编辑单元格实现

结合v-model实现单元格内容编辑：

<td v-for="(cell, cellIndex) in row" :key="cellIndex">
  <input v-model="row[cellIndex]" type="text">
</td>

使用计算属性处理复杂数据

当需要处理或过滤表格数据时：

computed: {
  filteredData() {
    return this.tableData.filter(row => row.age > 25)
  }
}

动态表头配置

表头也可以通过数据驱动实现完全动态化：

data() {
  return {
    headers: [
      { text: '姓名', value: 'name' },
      { text: '年龄', value: 'age' }
    ],
    items: [
      { name: '张三', age: 25 },
      { name: '李四', age: 30 }
    ]
  }
}

使用第三方组件库

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

Element UI的el-table
Vuetify的v-data-table
PrimeVue的DataTable

示例使用Element UI：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>