vue+element实现列表行点击编辑按钮打开编辑对话框,在编辑对话框点击提交信息后立即关闭编辑对话框且列表当前行单行编辑按钮15内禁用
时间: 2024-05-10 09:20:03 浏览: 9
可以通过以下步骤实现:
1. 在列表行中添加一个编辑按钮,并绑定点击事件,点击按钮时弹出编辑对话框。
2. 在编辑对话框中添加表单,让用户输入需要编辑的信息。
3. 在表单中添加提交按钮,并绑定点击事件,点击提交按钮时触发提交操作。
4. 在提交操作中,先禁用当前行的单行编辑按钮,然后发送请求保存编辑信息。
5. 如果保存成功,则立即关闭编辑对话框,并恢复当前行的单行编辑按钮的可用状态。
下面是一个示例代码,具体实现可以根据自己的需求进行调整:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible" title="编辑信息">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit" :disabled="submitting">提交</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 22 },
{ name: '王五', age: 25 }
],
dialogVisible: false, // 是否显示编辑对话框
form: { name: '', age: '' }, // 编辑表单数据
submitting: false // 是否正在提交数据
}
},
methods: {
handleEdit(row) {
this.dialogVisible = true // 显示编辑对话框
this.form = { ...row } // 将当前行的数据复制到编辑表单中
},
handleSubmit() {
this.submitting = true // 禁用提交按钮
setTimeout(() => {
// 模拟提交数据
console.log('提交数据', this.form)
this.submitting = false // 启用提交按钮
this.dialogVisible = false // 关闭编辑对话框
}, 1000)
}
}
}
</script>
```
在提交数据时,我们可以使用`setTimeout`函数模拟异步请求的延迟,等待1秒钟后再关闭编辑对话框和启用单行编辑按钮。如果需要向服务器发送请求保存数据,可以在`setTimeout`函数中使用`axios`等库进行请求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)