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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
最新最全的手机号验证正则表达式
Feb 24 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环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
JS动态调用方法名示例介绍
2013/12/18 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
微信小程序实现留言板
2018/10/31 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
python基础知识小结之集合
2015/11/25 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
python else语句在循环中的运用详解
2020/07/06 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
电子银行营销方案
2014/02/22 职场文书
亲属关系公证书
2014/04/08 职场文书
余世维讲座观后感
2015/06/11 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js