vue可编辑的el-table表格

### 创建可编辑的 Element UI `el-table` 示例 为了实现在 Vue 中创建可编辑的 Element UI 表格，可以采用如下方法： 定义一个基础表格结构并引入必要的样式和脚本文件。通过绑定数据源到 `el-table` 组件上，并利用自定义模板来渲染每一行的内容。 #### 数据模型设计 首先，在 JavaScript 部分初始化所需的数据对象，包括原始数据列表以及用于控制单元格是否处于编辑状态的状态变量。 ```javascript export default { data() { return { tableData: [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' } ], editStatus: {} }; } } ``` #### HTML 结构构建 接着，在模板部分编写相应的 HTML 代码片段，这里使用了 `<el-input>` 来替代默认的文字展示方式以便于输入修改后的值。 ```html <template> <div style="margin-top: 20px;"> <el-button @click="addRow">Add Row</el-button> <el-table :data="tableData"> <!-- 循环生成列 --> <el-table-column prop="date" label="Date"></el-table-column> <el-table-column prop="name" label="Name" width="180"> <template slot-scope="scope"> <span v-if="!editStatus[scope.$index]">{{ scope.row.name }}</span> <el-input v-model="scope.row.name" v-else></el-input> </template> </el-table-column> <el-table-column prop="address" label="Address"> <template slot-scope="scope"> <span v-if="!editStatus[scope.$index]">{{ scope.row.address }}</span> <el-input v-model="scope.row.address" v-else></el-input> </template> </el-table-column> <el-table-column fixed="right" label="Operations" width="120"> <template slot-scope="scope"> <el-button type="text" size="small" @click="toggleEdit(scope.$index)">Edit</el-button> <el-button type="text" size="small" @click="deleteRow(scope.$index)">Delete</el-button> </template> </el-table-column> </el-table> </div> </template> ``` #### 编辑功能逻辑处理 最后一步是在 methods 属性里添加操作函数，用来切换当前行的编辑模式、保存更改过的记录或是移除某一行条目。 ```javascript methods: { toggleEdit(index) { this.editStatus[index] = !this.editStatus[index]; }, deleteRow(index) { this.tableData.splice(index, 1); Object.keys(this.editStatus).forEach((key, i) => { if (parseInt(key, 10) >= index && key !== `${i}`) { delete this.editStatus[key]; } }); }, addRow() { const newRow = { date: '', name: '', address: '' }; this.tableData.push(newRow); this.editStatus[this.tableData.length - 1] = true; } } ``` 上述代码实现了基本的功能需求——允许用户点击按钮进入编辑模式对特定行的信息进行调整；完成编辑后再次点击该按钮则会退出编辑模式并将更新的结果保留下来[^3]。

在Vue3中，可以使用`<el-table>`组件来实现可编辑的表格。具体步骤如下： 1. 安装`element-plus`组件库：在终端中运行以下命令来安装： ``` npm install element-plus --save ``` 2. 在Vue3的入口文件中引入`element-plus`组件库： ```js import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 3. 在需要使用可编辑表格的组件中，引入`<el-table>`组件，并设置`editable`属性为`true`： ```html <template> <el-table :data="tableData" :editable="true"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' } ] } } } </script> ``` 上面的代码中，`tableData`数组中的数据是表格的数据源，`el-table-column`组件中的`prop`属性对应了`tableData`数组中的数据键名，`label`属性则是表格列的标题。 当`editable`属性为`true`时，表格的单元格可以进行编辑，用户可以直接在单元格中输入或修改数据，修改后的数据会自动同步到`tableData`数组中。