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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
微信小程序实现自动定位功能
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文件上传的两种实现方法
2016/04/04 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python中enumerate函数用法实例分析
2015/05/20 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Python读写zip压缩文件的方法
2018/08/29 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
《只有一个地球》教学反思
2014/02/14 职场文书
代办委托书怎样写
2014/04/08 职场文书
蓝颜请假条
2014/04/11 职场文书
赔偿协议书范本
2014/04/15 职场文书
见习报告怎么写
2014/10/31 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
寒假安全保证书
2015/02/28 职场文书
投标售后服务承诺书
2015/04/29 职场文书
宪法宣传标语100条
2019/10/15 职场文书