vue+element实现列表的增删改查

在Vue.js框架中结合Element UI库来实现列表的增删改查操作，通常会涉及到以下几个步骤：

1. **数据绑定**：首先，你需要在Vue实例中管理数据，比如一个数组来存储列表项。可以使用`v-for`指令将数据渲染成列表。

<el-table :data="items">
  <!-- 表格列 -->
  <el-table-column prop="name" label="姓名"></el-table-column>
  <!-- 其他列... -->
</el-table>

<el-button v-for="(item, index) in items" :key="index"
          @click="handleEdit(item.id)">编辑</el-button>
<el-button @click="handleDelete">删除</button>
<el-button @click="handleAdd">添加</button>

2. **方法实现**：
- `handleEdit(id)`：点击编辑按钮时，显示表单并获取对应id的数据。
- `handleDelete()`：删除列表项，通过`this.items.splice(index, 1)`移除元素，同时更新视图。
- `handleAdd()`：触发新增功能，创建新的数据项并追加到数组中。

export default {
  data() {
    return {
      items: [], // 初始化空数组
      form: {}, // 编辑表单的数据
    };
  },
  methods: {
    handleAdd() {
      this.items.push(this.form);
      this.form = {}; // 清空表单
    },
    handleEdit(id) {
      let item = this.items.find(item => item.id === id);
      this.form = item;
    },
    handleDelete(index) {
      this.items.splice(index, 1);
    }
  }
}