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 点击编辑表格某一行时获取内容填入表单 的相关文章

  • 如何在 Nuxt 中设置 netlify 表单

    当我通过添加带有 a 的链接来使用 vue router 导航到表单时
  • 如何将函数导入到Vue组件中?

    我正在尝试将单个函数导入到我的 Vue 组件中 我为我的函数创建了一个单独的 js 文件 randomId js exports randomId gt My function 在我的 Vue 组件中 我导入了 Random js let
  • Nuxt + Vuex - 如何将 Vuex 模块分解为单独的文件?

    在 Nuxt 文档中 here https nuxtjs org guide vuex store module files 它说 您可以选择将模块文件分解为单独的文件 state js actions js mutations js an
  • 作为对象访问 vue-i18n 消息

    我想创建一个取决于页面的动态滑块 security signin slide1 Kitten1 slide2 Kitten2 signup slide1 Kitten1 slide2 Kitten2 slide3 Kitten3 问题是我想
  • FCM onMessage 无法在 Firefox 中工作,但可以在 chrome 中工作

    我的代码是工作完美在chrome上 版本103 0 5060 134 但是当我在firefox 103 0 上尝试时它不工作 Service Worker 注册成功 但无法接收通知 消息 控制台中没有显示错误 这是我的代码 顺便说一句 我正
  • Vue 2 转换不起作用

    我不知道我的代码哪里出了问题 这应该是一个简单的过渡 当我单击按钮时 消息显示正确 但只是根本没有发生淡入淡出过渡
  • 页面在 Google Adwords 转化跟踪上重定向

    我有一个表单 人们可以在其中提交数据 然后使用 ajax 将数据发送到服务器 我已将其设置为 Google Adwords 中的转化 下面是我使用过的代码 问题是 当用户提交表单时 在收到响应后 它会重定向回我给出的 URL 我不想重定向
  • nuxtjs 无法在生产环境中显示动态 url

    我正在使用 nuxjs 构建我的项目 并创建一个动态显示地点信息的页面 当我跑步时npm run dev并测试http localhost 3000 place 66bb50b7a5 http localhost 3000 place 66
  • 如何设置vite.config.js基本公共路径?

    我正在尝试设置一个base url对于我的开发和生产环境 但是vitejs配置未解决 根据vitejs https vitejs dev config 您可以在配置选项中设置在开发或生产中提供服务时的基本公共路径 当从命令行运行 vite
  • 如何在 Laravel 5.4 中加载 Vue 组件?

    我已经运行 npm run watch 并收到了消息 This dependency was not found in resources assets js app js To install it you can run npm ins
  • 访问 nuxt 配置文件中的存储

    我想添加通过 Nuxt 静态生成的动态路由 我定义了一个客户端 服务器端存储asyncData方法 我想将这个存储值 一个数组 映射到我的nuxt config js文件使其成为 动态 静态 路线图nuxt generate命令 但如何访问
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 如果用户在 Laravel 中经过身份验证,如何检查 Vue 组件?

    正如标题所述 我有点困惑如何根据用户是否登录并使用 Laravel 的 Auth 外观进行身份验证 使用 if else 语句处理 Vue 组件中的方法 我正在发出各种 Axios 请求 我需要根据用户是否登录来允许 禁止这些请求 我有 V
  • 如何在Vue.js中格式化当前日期格式

    我需要获取当前日期Vue js 为此 我使用了以下方法 today date new Date toJSON slice 0 10 replace g today date将给出日期2019 09 11格式 有什么方法可以自定义这种格式吗
  • 如何在 Vue.js 中将 InnerHtml 复制到剪贴板?

    我想将此 for 循环的内容复制到剪贴板中 div class links div class row p makeUrl name p div div
  • 监听来自动态vue组件的事件

    您将如何侦听动态创建的组件实例发出的事件 在示例中 顶部组件添加到 DOM 中 而第二个组件是在 javascript 中动态创建的 Vue component button counter data function return cou
  • Vue.js + Element UI:在更改时获取“event.target”

    我无法获取在事件处理程序中触发事件的 html 字段 在 javascript 中是event target 我有一个表格 附加到更改事件函数的输入元素 管理更改事件的函数 我的代码如下 var Main methods change pa
  • 如何将Vue包装的对象转换为普通对象

    我需要将对象类型的数据变量分配给普通变量 const myVue new Vue el myVue data vars show Form methods assign vars const new vars this vars html
  • 如何在 vuelidate 验证中使用条件运算符?

    我刚刚安装维埃利达特 https www npmjs com package vuelidate 并创建了一个助手来检查该值是否为phone no 参考 https vuelidate js org sub list of helpers
  • 实现npm包自定义组件VueJS

    我正在尝试使用以下 npm package 来绕过 X frame 选项 https www npmjs com package x frame bypass https www npmjs com package x frame bypa

随机推荐

  • 基于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