vue+elementUI表格某一行修改局部刷新实现

news/2024/11/25 15:48:47/

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


http://www.ppmy.cn/news/101686.html

相关文章

一个完整的APP定制开发流程是怎样的?

随着移动互联网的发展&#xff0c;越来越多的 APP应用软件进入人们的生活&#xff0c;让我们的生活更便捷、更舒适。而随着互联网技术的进步&#xff0c;移动互联网应用软件开发行业也越来越成熟&#xff0c;为了适应市场需求&#xff0c;各种功能强大、性能良好的 APP应用软件…

swagger-codegen的使用方法及常见参数配置

前言 在进行API开发时&#xff0c;我们通常需要定义API的接口规范和文档&#xff0c;以方便其他开发者调用和使用。Swagger是一款非常流行的API文档生成工具&#xff0c;它可以帮助我们快速生成API接口文档&#xff0c;并提供了许多便捷的功能。本文将介绍如何使用swagger-cod…

MYSQL 查询数据库中所有表中的数据量

1. 查询数据库中所有表中的数据量 SELECT TABLE_NAME, TABLE_ROWS FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA your_database_name; 将 your_database_name 替换为您实际使用的数据库名称。 执行以上查询语句后&#xff0c;将会获取到 your_database_name 数据库…

jQuery-表中数据的添加与删除

<!DOCTYPE HTML> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <title>表中数据的添加与删除</title> <link rel"stylesheet" type"text/css&quo…

数据仓库的数据组织形式与技术实现

随着信息时代的到来&#xff0c;数据成为越来越重要的资源。数据仓库作为一种企业级的数据存储和管理架构&#xff0c;在信息管理中扮演着重要的角色。数据仓库的组织形式直接影响到数据的有效性和可靠性。本文将重点探讨数据仓库的数据组织形式&#xff0c;以及其优缺点和未来…

使用uniapp开发国际化---app,vue,nvue

插件市场下载示例 hello-i18n 示例工程 - DCloud 插件市场 项目使用 main.js引入 // 国际化 json 文件&#xff0c;文件内容详见下面的示例 import en from ./en.json import zhHans from ./zh-Hans.json import zhHant from ./zh-Hant.json const messages {en,zh-Hans: …

TCP协议的RST标志

下文中的内容多数来自【参考】中的文章&#xff0c;这边进行一个整理和总结&#xff0c;后续会慢慢增加出现各个 RST 包的测试代码&#xff0c;便于理解。 TCP的 “断开连接” 标志 RST 标志 Reset&#xff0c;复位标志&#xff0c;用于非正常地关闭连接。它是 TCP 协议首部里…

代码随想录算法训练营第55天 | 392、115

392. 判断子序列 题目描述 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abc…