平武建站

vuejs+elementUI点击编辑表格某一行时怎么获取内容填入表单

小编给大家分享一下vuejs+element UI点击编辑表格某一行时怎么获取内容填入表单，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

扎兰屯网站建设公司创新互联,扎兰屯网站设计制作，有大型网站制作公司丰富经验。已为扎兰屯数千家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的扎兰屯做网站的公司定做！

如果是已经有点经验的同学，可以直接看下面这个函数，应该就能明白怎么回事，新手可以看下面的详细教程。

函数：

handleEdit: function (index, row) {
  this.editFormVisible = true;
  this.editForm = Object.assign({}, row);
}

详细教程：

1.首先，做一个表格，用于显示信息；代码如下：


  
  
  
  
  
  
  
  
  
  
  
  
  
  
   编辑     
  
  

这里表格绑定的数据data是自己获取到的，可以定义一个名为users的数组，然后从后端获取数据直接赋值就行，这里就不在赘述。或者先用mockjs随机生成数据测试更方便。

2.写一个弹出的编辑页面。


 
  
  
   
  
  
   
  
  
   
  
  
   
  
  
  
  取消
  提交   
  
 

弹出页面的表单名为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);
  }

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

看完了这篇文章，相信你对“vuejs+element UI点击编辑表格某一行时怎么获取内容填入表单”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


分享标题：vuejs+elementUI点击编辑表格某一行时怎么获取内容填入表单
本文链接：http://pwwzsj.com/article/gppspi.html

其他资讯