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 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
详解Node.js串行化流程控制
May 04 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 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&amp;MYSQL分页原理及实现
2007/01/02 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP使用递归生成文章树
2015/04/21 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python查找第k小元素代码分享
2013/12/18 Python
Python实现截屏的函数
2015/07/25 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
jupyter 导入csv文件方式
2020/04/21 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python中random模块详解
2021/03/01 Python
纺织工程专业个人求职信范文
2014/01/27 职场文书
北体毕业生求职信
2014/02/28 职场文书
普宁寺导游词
2015/02/04 职场文书
创卫工作总结2015
2015/04/22 职场文书
客户答谢会致辞
2015/07/30 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers