成都网站建设设计

将想法与焦点和您一起共享

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

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

创新互联主营龙圩网站建设的网络公司,主营网站建设方案,手机APP定制开发,龙圩h5小程序开发搭建,龙圩网站营销推广欢迎龙圩等地区企业咨询

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

函数:

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点击编辑表格某一行时怎么获取内容填入表单-创新互联
URL链接:http://chengdu.cdxwcx.cn/article/phede.html

其他资讯