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点击编辑表格某一行时怎么获取内容填入表单-创新互联
分享网址:http://myzitong.com/article/phede.html