element-plus表单中操作按钮按下后改为显示取消操作,每行按钮单独改变
时间: 2024-05-03 14:19:35 浏览: 63
可以使用 `slot-scope` 和 `v-if` 属性来实现这个需求。
首先,在表单中添加一个操作按钮的列,使用 `slot-scope` 绑定每个行的数据,然后在 `template` 中添加按钮。
```html
<el-table-column label="操作">
<template slot-scope="scope">
<el-button v-if="!scope.row.isEditing" @click="startEdit(scope.row)">编辑</el-button>
<el-button v-if="scope.row.isEditing" @click="cancelEdit(scope.row)">取消</el-button>
</template>
</el-table-column>
```
在上述代码中,当 `isEditing` 属性为 `false` 时,显示“编辑”按钮,当 `isEditing` 属性为 `true` 时,显示“取消”按钮。
接下来,定义 `startEdit` 和 `cancelEdit` 方法,来启动和取消编辑模式。
```js
export default {
data() {
return {
// ...
editingRow: null
}
},
methods: {
startEdit(row) {
this.editingRow = row;
this.$set(row, 'isEditing', true);
},
cancelEdit(row) {
row.isEditing = false;
this.editingRow = null;
}
}
}
```
在上述代码中,`editingRow` 属性用来记录当前正在编辑的行,当点击“编辑”按钮时,将该行记录到 `editingRow` 中,并将该行的 `isEditing` 属性设置为 `true`,从而显示“取消”按钮。当点击“取消”按钮时,将该行的 `isEditing` 属性设置为 `false`,从而显示“编辑”按钮。
这样,每行的操作按钮就可以单独改变了。
阅读全文