我在确定修改后向后端发送数据将请求回来的数据进行渲染
时间: 2024-02-17 19:05:23 浏览: 14
如果您在确定修改后向后端发送数据并请求回来新的数据,可以在请求成功后将新的数据赋值给`el-table`的数据源来重新渲染表格。
以下是一个示例代码:
```html
<template>
<el-table :data="tableData">
<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 @click="updateData(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
]
}
},
methods: {
updateData(row) {
// 执行修改操作
// ...
// 向后端发送数据并请求回来新的数据
const newData = [
{ id: 1, name: '张三', age: 22 },
{ id: 2, name: '李四', age: 27 },
{ id: 3, name: '王五', age: 32 }
]
// 将新的数据赋值给表格数据源
this.tableData = newData
}
}
}
</script>
```
在上述示例中,我们在`updateData`方法中执行修改操作后,向后端发送数据并请求回来新的数据。然后,我们将新的数据赋值给`el-table`的数据源`tableData`,这样表格就会根据新的数据重新渲染。