vue+element实现列表行点击编辑按钮打开编辑对话框,在编辑对话框点击提交信息后立即关闭编辑对话框且列表行编辑按钮15内禁用
时间: 2024-05-14 19:15:11 浏览: 106
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
可以通过以下步骤实现:
1. 在列表行中添加一个编辑按钮,并绑定点击事件处理函数。
```html
<el-table-column>
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
```
2. 在`handleEdit`函数中,设置一个标志变量`isEditing`为`true`,并记录当前编辑的行数据。然后打开一个`el-dialog`对话框,用于编辑数据。
```js
data() {
return {
isEditing: false,
editingRow: null
}
},
methods: {
handleEdit(row) {
this.isEditing = true
this.editingRow = row
}
}
```
```html
<el-dialog v-model="isEditing">
<el-form>
<!-- 编辑表单内容 -->
</el-form>
<div slot="footer">
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button @click="handleCancel">取消</el-button>
</div>
</el-dialog>
```
3. 在`handleSubmit`函数中,先禁用编辑按钮,并在15秒后重新启用。然后关闭对话框,清空标志变量和编辑行数据。
```js
handleSubmit() {
// 禁用编辑按钮
this.isEditing = false
this.editingRow = null
this.disableEditButton()
// 提交表单数据
// ...
// 关闭对话框
this.isEditing = false
},
disableEditButton() {
// 禁用当前编辑行的编辑按钮
const row = this.editingRow
const elButton = this.$refs.table.$el.querySelector(`.el-table__row[data-row-key="${row.id}"] .el-button`)
if (elButton) {
elButton.disabled = true
setTimeout(() => {
elButton.disabled = false
}, 15000)
}
}
```
阅读全文