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 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
JSONP基础知识详解
Mar 19 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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
php5 mysql分页实例代码
2008/04/10 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
微信小程序自定义组件
2017/08/16 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 获取网页编码方式实现代码
2017/03/11 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
单身联谊活动方案
2014/01/29 职场文书
小学生学习感言
2014/03/10 职场文书
李敖北大演讲稿
2014/05/24 职场文书
工地标语大全
2014/06/18 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
中学总务处工作总结
2015/08/12 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python