elementui table双击表数据编辑发送后端请求
时间: 2023-10-02 19:11:10 浏览: 111
好的,你可以参考以下步骤:
1. 在表格中设置 `@row-dblclick` 事件,用于监听双击事件并打开编辑框。
```html
<el-table @row-dblclick="handleEdit">
<!-- 表格列 -->
</el-table>
```
2. 在 `handleEdit` 方法中,设置编辑框的显示状态,并将当前双击的行数据保存到 `formData` 变量中。
```javascript
methods: {
handleEdit(row) {
// 显示编辑框
this.dialogVisible = true;
// 将当前行数据保存到formData中
this.formData = Object.assign({}, row);
}
}
```
3. 编辑框中的数据绑定到 `formData` 变量上。
```html
<el-dialog v-model="dialogVisible">
<el-input v-model="formData.xxx"></el-input>
<!-- 其他表单项 -->
</el-dialog>
```
4. 在编辑框中设置 `@confirm` 事件,用于监听用户点击确认按钮的事件。
```html
<el-dialog v-model="dialogVisible" @confirm="handleSubmit">
<!-- 表单项 -->
</el-dialog>
```
5. 在 `handleSubmit` 方法中,发送请求将编辑后的数据提交到后端。
```javascript
methods: {
handleSubmit() {
// 发送请求
axios.post('/api/update', this.formData).then(res => {
// 处理请求成功的回调
}).catch(err => {
// 处理请求失败的回调
});
}
}
```
注意:以上代码仅供参考,具体实现需要根据实际情况进行调整。另外,为了更好的用户体验,可以在发送请求的时候显示一个 loading 动画等待请求完成。
阅读全文