vue+elementUI表格某一行修改局部刷新实现
使用elementUI表格,想修改某一行数据然后不想全量刷新,只想刷新当前修改的行内容。1.主要是获取下标和行内容:scope.$index,scope.row。
·
log:
使用elementUI表格,想修改某一行数据然后不想全量刷新,只想刷新当前修改的行内容
实现过程:
表格操作列代码:
1.主要是获取下标和行内容:scope.$index,scope.row
<el-table-column width="200" label="操作" prop="datafile" fixed="right">
<template slot-scope="scope">
<el-button
@click.native.prevent="openTopic(scope.$index,scope.row)"
type="text"
size="small"
>
修改
</el-button>
</template>
</el-table-column>
2.点击修改会弹出一个框,实现代码:
data() {
return {
table_row : "",
table_index:"",
form: {
id: "",
name:"",
......
},
methods: {
openTopic(index,row) {
//打开dialog编辑框
this.dialogFormupdate = true;
//获取到的行内容放到表单里
this.form = row;
//重新存一份行内容
this.table_row = row;
//下标存起来
this.table_index=index;
},
}
3.再弹框修改完内容后提交代码:
页面部分:
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormupdate = false">取 消</el-button>
<el-button type="primary" @click="updateUser()">更 新</el-button>
</div>
js部分:
updateUser() {
this.$axios.put("/fzyh/update/xs/yh", this.form).then((res) => {
if (res.status == 200) {
this.dialogFormupdate = false;
console.log(this.table_index, this.table_row)
if (this.form[this.table_index] !=this.table_row[this.table_index]){
this.$set(this.form, this.table_index, this.table_row);
this.table_index="";
this.table_row="";
this.form={};
};
this.$message.success("修改成功!");
} else {
this.dialogFormupdate = false;
this.$message.error("新增失败,失败原因:", res.data);
}
});
},
更多推荐
已为社区贡献2条内容
所有评论(0)