写一个el-table 表格 修改
时间: 2024-01-20 10:02:09 浏览: 62
数据后自动保存的方法是什么?
你可以在 el-table 的 @cell-click 或 @cell-dblclick 事件中获取到当前修改的数据,并将其保存到后端服务器。具体实现可以使用 Axios 或其他类似的 HTTP 库来发送数据到服务器端。例如:
<el-table
:data="tableData"
@cell-dblclick="handleCellDblclick"
>
<el-table-column
prop="name"
label="姓名"
>
</el-table-column>
<el-table-column
prop="age"
label="年龄"
>
</el-table-column>
<el-table-column
prop="gender"
label="性别"
>
</el-table-column>
</el-table>
methods: {
handleCellDblclick(row, column, event) {
// 获取当前修改的数据
const { prop } = column;
const value = event.target.innerText.trim();
row[prop] = value;
// 发送数据到后端服务器
axios.post('/api/updateData', row)
.then(response => {
// 数据保存成功的处理逻辑
})
.catch(error => {
// 数据保存失败的处理逻辑
});
}
}
阅读全文