element ui同时保存多个tab页面的表单内容

最新推荐文章于 2024-08-15 23:24:24 发布

Monkey蒙

最新推荐文章于 2024-08-15 23:24:24 发布

阅读量4.1k

点赞数 2

分类专栏：前端文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/weixin_51341030/article/details/121911166

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用element-ui中tab页时在存在多个tab页面是如何获取全部tab页面的内容

 在项目阶段中碰见了这样一个问题，子组件是动态渲染出的若干个tab页面，可以来回切换，然后在父组件有一个提交按钮，点击之后，需要把这几个tab页中的数据合并到一起通过接口发送出去，看了几篇文章之后感觉不是很明白，于是就自己试着写了一个
 说一下我这边的情况，是有若干个tab页，每个页面都有若干个table表格，需要点击提交之后吧tab页中的数据集合到一起

//在子组件中
onsubmit(){
	return {
a:this.form1,
b:this.form2,
c:this.form3 // 这里的form就是获取到的表格的数据
}
}

//在父组件中
<html>
<el-button @click="save">save</el-button>
<!-- 子组件标签-->
<el-tabs>
<el-tab-pane >
<child ref="cond"></child>
</el-tab-pane>
</el-tabs>
</html>


save(){
// 保存动作，获取所有tab页内的表单数据
var obj  = {} // 定义一个空的对象,去接收值
obj = this.arrayList.map(index=>{
	return {...this.$ref.cond[index].onsubmit()}
})
console.log(obj)
}