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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
javascript模拟命名空间
Apr 17 Javascript
js密码强度校验
Nov 10 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Python random模块制作简易的四位数验证码
2020/02/01 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
创联软件面试题笔试题
2012/10/07 面试题
硕士研究生个人求职信
2013/12/04 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
七年级英语教学反思
2014/01/15 职场文书
迟到检讨书
2015/01/26 职场文书
团组织推荐意见
2015/06/05 职场文书
新教师教学工作总结
2015/08/12 职场文书
汽车销售员工作总结
2015/08/12 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书