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 checkbox全选/取消全选实现代码
Nov 14 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue监听input标签的value值方法
Aug 27 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
JavaScript实现轮播图效果
Oct 30 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
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP 魔术函数使用说明
2010/05/14 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php文件系统处理方法小结
2016/05/23 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
jquery 常用操作方法
2010/01/28 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python装饰器与递归算法详解
2016/02/18 Python
Django 实现下载文件功能的示例
2018/03/06 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python新手学习装饰器
2020/06/04 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
公司会议策划方案
2014/05/17 职场文书
销售经理岗位职责
2015/01/31 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript