vue+element实现表格新增、编辑、删除功能

在Vue.js框架中结合Element UI库实现表格的新增、编辑和删除功能通常涉及以下几个步骤：

1. **数据绑定**：首先，你需要创建一个数组来存储表格的数据，并在Vue组件的data选项中定义。当有新增、编辑或删除操作时，这个数组需要实时更新。

data() {
  return {
    tableData: [], // 初始化空数组
  };
}

2. **表格渲染**：使用Element UI的`el-table`组件展示数据，通过`v-for`指令遍历数组，将每个数据项作为tableData的一个元素。

3. **新增操作**：可以添加一个按钮，点击后弹出模态框，用户输入信息并提交时，向`tableData`数组追加新的对象。

4. **编辑操作**：在表格中设置编辑列，当用户双击某一行或者点击编辑按钮，进入编辑模式，允许修改数据，然后保存时更新对应的表格行。

5. **删除操作**：在每一行的末尾提供删除按钮，点击后从数组中移除该行对应的对象。

6. **事件处理**：对于以上操作，都需要配合Vue的响应式特性，监听用户的交互事件（如click、dblclick等），并触发相应的数据变更方法（例如`push`, `set`, 或者`splice`）。

以下是简化版的示例代码片段：

<template>
  <el-table :data="tableData">
    <!-- 添加、编辑和删除操作列 -->
    <el-table-column type="action" width="180">
      <template slot-scope="scope">
        <el-button @click="editRow(scope.$index)" :disabled="scope.row.disabled">编辑</el-button>
        <el-button @click="deleteRow(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
    <!-- 表头和内容列 -->
    <el-table-column prop="name" label="Name"></el-table-column>
    <!-- 其他列... -->
  </el-table>
  <!-- 新增模态 -->
  <el-dialog v-model="dialogVisible" title="新增">
    <el-form ref="addForm" :model="formAdd" rules="...">
      <!-- 新增表单... -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleAdd">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      formAdd: {}, // 新增表单数据
      tableData: [],
    };
  },
  methods: {
    editRow(index) {
      // 编辑操作...
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    handleAdd() {
      this.dialogVisible = false;
      this.tableData.push(this.formAdd); // 添加到数据数组
    }
  }
};
</script>