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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
React路由管理之React Router总结
May 10 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
node.js通过url读取文件
Oct 16 Javascript
详解JavaScript执行模型
Nov 16 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
详解从Vue-router到html5的pushState
2018/07/21 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
浅谈Python基础—判断和循环
2019/03/22 Python
python实现视频分帧效果
2019/05/31 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
python本地文件服务器实例教程
2021/05/02 Python