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


Posted in Javascript onOctober 31, 2018

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

函数:

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

暂时能想到的就这么多,如果写的有什么问题,欢迎指正!!!或者有什么问题也可以留言我们共同进步哦!!希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现复制与粘贴操作实例
Oct 16 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 #Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
vue+iview 实现可编辑表格的示例代码
Oct 31 #Javascript
详解vue 项目白屏解决方案
Oct 31 #Javascript
微信小程序ibeacon三点定位详解
Oct 31 #Javascript
小程序获取周围IBeacon设备的方法
Oct 31 #Javascript
You might like
动态新闻发布的实现及其技巧
2006/10/09 PHP
php和nginx交互实例讲解
2019/09/24 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python 3.x 新特性及10大变化
2015/06/12 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
历史学专业毕业生求职信
2013/09/27 职场文书
事业单位接收函
2014/01/10 职场文书
股份合作协议书
2014/09/10 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
先进个人总结范文
2015/02/15 职场文书
教师自荐信范文
2015/03/06 职场文书
2015年团支书工作总结
2015/04/03 职场文书
党支部考察意见范文
2015/06/02 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server