当前位置：首页 > VUE

vue实现可变表格

2026-03-29 21:02:43VUE

Vue 实现可变表格的方法

在 Vue 中实现可变表格（动态增删行列或修改内容）可以通过多种方式完成。以下是几种常见的方法：

使用 v-for 动态渲染表格

通过 v-for 指令动态渲染表格的行和列，数据驱动表格内容的变化。表格数据通常存储在 Vue 的 data 中，通过方法修改数据即可实现表格的动态变化。

<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">
          <input v-model="tableData[rowIndex][cellIndex]" />
        </td>
        <td><button @click="removeRow(rowIndex)">删除</button></td>
      </tr>
    </tbody>
  </table>
  <button @click="addRow">添加行</button>
  <button @click="addColumn">添加列</button>
</template>

<script>
export default {
  data() {
    return {
      headers: ['列1', '列2', '列3'],
      tableData: [
        ['数据1', '数据2', '数据3'],
        ['数据4', '数据5', '数据6']
      ]
    }
  },
  methods: {
    addRow() {
      this.tableData.push(Array(this.headers.length).fill('新数据'));
    },
    removeRow(index) {
      this.tableData.splice(index, 1);
    },
    addColumn() {
      this.headers.push(`列${this.headers.length + 1}`);
      this.tableData.forEach(row => row.push('新数据'));
    }
  }
}
</script>

使用 Vue 组件封装表格

将表格封装为可复用的组件，通过 props 接收数据，通过 $emit 触发事件实现增删改操作。

<template>
  <div>
    <dynamic-table :headers="headers" :rows="rows" @add-row="handleAddRow" @remove-row="handleRemoveRow" />
  </div>
</template>

<script>
import DynamicTable from './DynamicTable.vue';

export default {
  components: { DynamicTable },
  data() {
    return {
      headers: ['姓名', '年龄'],
      rows: [
        ['张三', 20],
        ['李四', 25]
      ]
    }
  },
  methods: {
    handleAddRow() {
      this.rows.push(['新用户', 0]);
    },
    handleRemoveRow(index) {
      this.rows.splice(index, 1);
    }
  }
}
</script>

使用第三方表格库

对于更复杂的需求（如排序、筛选、分页等），可以使用第三方表格库如 Element UI、Vuetify 或 ag-grid-vue。

以 Element UI 为例：

vue实现可变表格

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column v-for="header in headers" :key="header" :prop="header" :label="header" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="mini" @click="removeRow(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button @click="addRow">添加行</el-button>
</template>

<script>
export default {
  data() {
    return {
      headers: ['date', 'name', 'address'],
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京' },
        { date: '2023-01-02', name: '李四', address: '上海' }
      ]
    }
  },
  methods: {
    addRow() {
      this.tableData.push({ date: '新日期', name: '新用户', address: '新地址' });
    },
    removeRow(index) {
      this.tableData.splice(index, 1);
    }
  }
}
</script>