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中this的使用说明
Sep 06 Javascript
JavaScript基本编码模式小结
May 23 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python区分不同数据类型的方法
2019/10/14 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python实现的分层随机抽样案例
2020/02/25 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
学术会议欢迎词
2014/01/09 职场文书
社团活动总结怎么写
2014/06/30 职场文书
班级课外活动总结
2014/07/09 职场文书
内科护士节演讲稿
2014/09/11 职场文书
实习协议书
2015/01/27 职场文书
放假通知格式
2015/04/14 职场文书
入党积极分子考察意见
2015/06/02 职场文书
钢琴师观后感
2015/06/12 职场文书
小学见习报告
2015/06/23 职场文书
用Python提取PDF表格的方法
2021/04/11 Python