el-table中只更新单条数据
时间: 2023-10-18 20:12:55 浏览: 41
如果您想在`el-table`中更新单个数据,可以使用以下方法:
1. 首先,找到需要更新的数据对象,并对其进行修改。
2. 然后,使用`Array.prototype.splice()`方法将更新后的数据插入到原始数据数组中。
3. 最后,通过重新赋值原始数据来触发`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: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
]
}
},
methods: {
updateData(row) {
// 找到需要更新的数据对象
const updatedData = { name: '赵六', age: 35 }
const index = this.tableData.indexOf(row)
// 对数据进行修改
Object.assign(this.tableData[index], updatedData)
// 插入更新后的数据
this.tableData.splice(index, 1, this.tableData[index])
// 触发表格重新渲染
this.tableData = [...this.tableData]
}
}
}
</script>
```
在上述示例中,我们通过`updateData`方法来更新数据。在这个方法中,我们首先找到需要更新的数据对象,并对其进行修改。然后,我们使用`splice`方法将更新后的数据插入到原始数据数组中。最后,我们通过重新赋值原始数据来触发`el-table`的重新渲染。