当前位置：首页 > VUE

vue实现表格数据增删

2026-02-25 20:17:15VUE

Vue实现表格数据增删的方法

数据绑定与渲染

在Vue中，表格数据通常通过v-for指令动态渲染。定义一个数组类型的数据源（如tableData），结合<table>或<el-table>（Element UI）实现渲染。示例代码：

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>
        <button @click="deleteRow(index)">删除</button>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    }
  }
}
</script>

新增数据

通过表单输入绑定v-model，在提交时使用数组的push方法添加新数据。示例代码：

<template>
  <input v-model="newItem.name" placeholder="姓名">
  <input v-model="newItem.age" placeholder="年龄">
  <button @click="addRow">添加</button>
</template>

<script>
export default {
  data() {
    return {
      newItem: { name: '', age: '' }
    }
  },
  methods: {
    addRow() {
      this.tableData.push({...this.newItem});
      this.newItem = { name: '', age: '' }; // 清空表单
    }
  }
}
</script>

删除数据

通过数组的splice方法根据索引删除指定行。结合事件绑定传递当前行的索引：

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

使用Element UI增强功能

若使用Element UI组件库，可简化表格操作。示例代码：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="deleteRow(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>