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 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
vue router 配置路由的方法
Jul 26 Javascript
Node.js fs模块原理及常见用途
Oct 22 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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php实现生成验证码实例分享
2016/04/10 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
javascript的this关键字详解
2019/05/20 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python对数据库操作
2016/03/28 Python
python中常用的九种预处理方法分享
2016/09/11 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
python中entry用法讲解
2020/12/04 Python
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
房地产融资计划书
2014/01/10 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2016年清明节寄语
2015/12/04 职场文书