vuejs+element UI 点击编辑表格某一行时获取内容填入表单

2023-11-08

如果是已经有点经验的同学,可以直接看下面这个函数,应该就能明白怎么回事,新手可以看下面的详细教程。

函数:

handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
}
详细教程:

1.首先,做一个表格,用于显示信息;代码如下:

<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="商品名称" width="120" sortable>
			</el-table-column>
			<el-table-column prop="price" label="价格" width="100" sortable>
			</el-table-column>
			<el-table-column prop="reserve" label="商品库存" min-width="120" sortable>
			</el-table-column>
			<el-table-column prop="desc" label="商品描述" min-width="180" sortable>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑          </el-button>
				</template>
			</el-table-column>
</el-table>
这里表格绑定的数据data是自己获取到的,可以定义一个名为users的数组,然后从后端获取数据直接赋值就行,这里就不在赘述。或者先用mockjs随机生成数据测试更方便。

2.写一个弹出的编辑页面。

<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="商品名称" prop="name">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input-number v-model="editForm.price"></el-input-number>
				</el-form-item>
				<el-form-item label="商品库存">
					<el-input-number v-model="editForm.reserve"></el-input-number>
				</el-form-item>
				<el-form-item label="商品描述">
					<el-input type="textarea" v-model="editForm.desc"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交      </el-button>
			</div>
		</el-dialog>
弹出页面的表单名为editForm,那么下面定义表单数据 editForm;

//编辑界面数据
				editForm: {
					id: 0,
					name: '',
					price: 0,
					desc: '',
					reserve:'',
				},
3.可以看到,上面第一个表格的编辑按钮上面绑定了click函数,名为handleEdit,当点击编辑按钮时调用函数,我们想在编辑页面中显示表格某一行的详细信息,那么就要在此函数中加入表单数据绑定的函数,代码如下:

//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			} 
红色的部分就是精华。
暂时能想到的就这么多,如果写的有什么问题,欢迎指正!!!或者有什么问题也可以留言我们共同进步哦!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs+element UI 点击编辑表格某一行时获取内容填入表单 的相关文章

随机推荐

  • 基于SpringBoot的电子招标投标管理系统

    末尾获取源码 开发语言 Java Java开发工具 JDK1 8 后端框架 SpringBoot 前端 HTML Vue 数据库 MySQL5 7 数据库管理工具 Navicat 12 服务器 Tomcat8 5 开发软件 IDEA Ecl
  • 京东首页实战(带商品栏)

    效果展示 在这里插入图片描述 https img blog csdnimg cn cdb0bf89b2b9415f814 项目结构 需要联系 224 855 7717
  • MySQL进阶面试题完全攻略

    除了基础题部分 本文还收集整理的MySQL面试题还包括如下知识点或题型 MySQL高性能索引 SQL语句 MySQL查询优化 MySQL高扩展高可用 MySQL安全性 问题1 char varchar的区别是什么 varchar是变长而ch
  • 雪过天晴:OTA熬过旅游业寒冬

    旅游业新年开门红的热闹余音犹在 OTA平台走入三年来最具总结意义的一个财报季 继携程 途牛后 同程旅行于3月21日公布了2022年全年财报 数据显示 2022年 同程旅行实现收入65 8亿元 经调整净利润6 5亿元 其中每个季度都保持了盈利
  • 再造STM32---第十九部分:I2C—读写 EEPROM

    本章参考资料 STM32F4xx 参考手册 STM32F4xx 规格书 库帮助文档 stm32f4xx dsp stdperiph lib um chm 及 I2C 总线协议 若对 I2C 通讯协议不了解 可先阅读 I2C 总线协议 文档的
  • stm32学习笔记-esp8266wifi模块连接云平台测试

    文章目录 一 ATK ESP8266模块简介 二 测试AT指令连接新大陆物联网云平台 一 ATK ESP8266模块简介 官方使用手册截图如下 我们知道这个wifi模块有三种模式 其串口通信波特率为115200 数据位为8 停止位为1 测试
  • 史上最全圣杯布局(转自前端神三元)

    圣杯布局如图 而且要做到左右宽度固定 中间宽度自适应 1 利用flex布局
  • 使用SSIS创建同步数据库数据任务

    SSIS SQL Server Integration Services 是用于生成企业级数据集成和数据转换解决方案的平台 使用 Integration Services 可解决复杂的业务问题 具体表现为 复制或下载文件 发送电子邮件以响应
  • 利用keil编写stm32循环点亮一LED灯

    利用keil编写stm32循环点亮一LED灯 在调试循环点亮一LED灯程序时 发现单步执行 能循环点亮 但连续执行时 不能循环点亮 后来发现 是我写的程序出了问题 应该在管脚置高和置低后均进行延时 程序如下 void LED Display
  • esp8266 eeprom_ESP8266内嵌网页配置WIFI及指令调试

    准备 1 智能网络模块 WIFI模块ESP8266 12S 12F 见底图2 Arduino IDE 最新版 1 8 13 目的 1 通过固件访问内置网页可以进行重置WIFI密码 见底图 2 通过固件内嵌网页可以进行指令测试 通过网页模拟串
  • Excel VBA 变量,数据类型&常量

    几乎所有计算机程序中都使用变量 VBA 也不例外 在过程开始时声明变量是一个好习惯 这不是必需的 但有助于识别内容的性质 文本 数据 数字等 在本教程中 您将学习 一 VBA变量 变量是存储在计算机内存或存储系统中的特定值 以后 您可以在代
  • 树的遍历(先序、中序、后序详解)

    树的遍历主要有三种 1 先序遍历 先遍历根节点 再遍历左节点 最后遍历右节点 2 中序遍历 先遍历左节点 再遍历根节点 最后遍历右节点 3 后序遍历 先遍历左节点 再遍历右节点 最后遍历根节点 总结 先 中 后就表示根节点的遍历处于哪个位置
  • Java开发环境搭建(进阶配置五 ——版本控制工具之GIT)

    与CVS SVN等集中式版本控制工具不同 Git是分布式版本控制工具 开发人员通过Checkout从中心版本库Copy一个完整的版本库到本地 就算不联网也可以进行commit update等操作 而且每次操作都是在本地进行 因而速度非常快
  • error C4146: 一元负运算符应用于无符号类型,结果仍为无符号类型

    用VS2015编译从GitHub上下载的一段代码 出现如下的错误提示 error C4146 一元负运算符应用于无符号类型 结果仍为无符号类型 warning C4244 从 double 转换到 float 可能丢失数据 error C4
  • Numpy中花式索引和shape用法

    原文转载自我的博客benym cn 总结一下最近学习中容易出现问题的地方 代码 from numpy import randMat random randint 0 10 4 3 print 原矩阵 n randMat 索引从0开始计数 p
  • jenkins+python自动化测试持续集成

    一 首先我们安装Jenkins 我这里采用的是 msi应用程序 根据提示进行安装 傻瓜式 最后会打开默认的网页地址 http localhost 8080 如果端口有冲突 可以去Jenkins的安装目录下的这个文件去改端口 二 进入Jenk
  • C/C++编程笔记:详解三种指针(悬空指针、空指针和野指针)

    悬空指针 指向已删除 或释放 的内存位置的指针称为悬空指针 指针用作悬空指针有三种不同的方式 内存分配 函数调用 如果x是静态变量 则不会出现问题 或p不会悬空 输出 5 变量超出范围 无效指针 无效指针是一种特定的指针类型 void 指向
  • Mycat实现读写分离,主备热切换

    实验环境 ubutu server 14 Master IP 172 16 34 212 Slave IP 172 16 34 34 156 Mycat server IP 172 16 34 219 不涉及过多理论 只有实现的过程 mys
  • COM三大接口:IUnknown、IClassFactory、IDispatch

    转载自 http blog sina com cn s blog 86d10dc701014m2v html 1 COM组件有三个最基本的接口类 分别是IUnknown IClassFactory IDispatch 1 1 COM规范规定
  • vuejs+element UI 点击编辑表格某一行时获取内容填入表单

    如果是已经有点经验的同学 可以直接看下面这个函数 应该就能明白怎么回事 新手可以看下面的详细教程 函数 handleEdit function index row this editFormVisible true this editFor