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验证工具类搜集整理
Jan 16 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
初学Python实用技巧两则
2014/08/29 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python实现kmp算法的实例代码
2019/04/03 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python如何写try语句
2020/07/14 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
银行员工职业规划范文
2014/01/21 职场文书
工作表现自我评价
2014/02/08 职场文书
办公设备采购方案
2014/03/16 职场文书
禁烟标语大全
2014/06/11 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
画展邀请函
2015/01/31 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
宪法宣传标语100条
2019/10/15 职场文书
基于Python实现nc批量转tif格式
2022/08/14 Python