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);}});},