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 相关文章推荐
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 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
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php生成RSS订阅的方法
2015/02/13 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
js select常用操作控制代码
2010/03/16 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
项目建议书
2015/02/04 职场文书
实名检举信范文
2015/03/02 职场文书
入伍通知书
2015/04/23 职场文书
行政诉讼答辩状
2015/05/21 职场文书
校运会班级霸气口号
2015/12/24 职场文书