vue实现表格增删改

实现表格增删改功能

在Vue中实现表格的增删改功能，可以通过以下方式完成：

数据绑定与渲染 使用v-for指令遍历数据数组，动态渲染表格内容。示例代码：

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

新增数据 通过表单收集新数据，使用数组的push方法添加：

methods: {
  addItem() {
    this.tableData.push({
      name: this.newName,
      age: this.newAge
    });
    this.newName = '';
    this.newAge = '';
  }
}

删除数据 使用数组的splice方法根据索引删除：

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

编辑数据 设置编辑状态和临时数据存储：

data() {
  return {
    editingIndex: -1,
    tempItem: {}
  }
},
methods: {
  editItem(index) {
    this.editingIndex = index;
    this.tempItem = {...this.tableData[index]};
  },
  saveEdit() {
    Object.assign(this.tableData[this.editingIndex], this.tempItem);
    this.cancelEdit();
  },
  cancelEdit() {
    this.editingIndex = -1;
    this.tempItem = {};
  }
}

表单绑定 使用v-model实现双向绑定：

<input v-model="tempItem.name" v-if="editingIndex === index">
<input v-model="tempItem.age" v-if="editingIndex === index">
<button @click="saveEdit" v-if="editingIndex === index">保存</button>
<button @click="cancelEdit" v-if="editingIndex === index">取消</button>

完整组件示例

将上述代码整合为完整组件：

<template>
  <div>
    <table>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>
          <span v-if="editingIndex !== index">{{ item.name }}</span>
          <input v-model="tempItem.name" v-else>
        </td>
        <td>
          <span v-if="editingIndex !== index">{{ item.age }}</span>
          <input v-model="tempItem.age" v-else>
        </td>
        <td>
          <button @click="editItem(index)" v-if="editingIndex !== index">编辑</button>
          <button @click="saveEdit" v-else>保存</button>
          <button @click="cancelEdit" v-if="editingIndex === index">取消</button>
          <button @click="deleteItem(index)">删除</button>
        </td>
      </tr>
    </table>
    <div>
      <input v-model="newName" placeholder="姓名">
      <input v-model="newAge" placeholder="年龄">
      <button @click="addItem">添加</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ],
      newName: '',
      newAge: '',
      editingIndex: -1,
      tempItem: {}
    }
  },
  methods: {
    addItem() {
      this.tableData.push({
        name: this.newName,
        age: this.newAge
      });
      this.newName = '';
      this.newAge = '';
    },
    deleteItem(index) {
      this.tableData.splice(index, 1);
    },
    editItem(index) {
      this.editingIndex = index;
      this.tempItem = {...this.tableData[index]};
    },
    saveEdit() {
      Object.assign(this.tableData[this.editingIndex], this.tempItem);
      this.cancelEdit();
    },
    cancelEdit() {
      this.editingIndex = -1;
      this.tempItem = {};
    }
  }
}
</script>

使用第三方组件库

如需更强大的表格功能，可以考虑使用Element UI或Ant Design Vue等组件库：

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="editItem(scope.row)">编辑</el-button>
        <el-button @click="deleteItem(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

Ant Design Vue示例

<template>
  <a-table :columns="columns" :dataSource="tableData">
    <template #action="{ record, index }">
      <a-button @click="editItem(record)">编辑</a-button>
      <a-button @click="deleteItem(index)">删除</a-button>
    </template>
  </a-table>
</template>