使用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)
}
基本的逻辑就是这个样子，需要注意的是，我们使用tab页的时候，子组件实际上会被渲染成多个，通过ref去调用子组件的方法的时候需要注意，此时的ref对应的是一个数组的形式，因此需要给ref对应的你的ref加下标才能取到对应的属性
小结
随笔记了一下这个方法，思路大概就是这样的，代码比较不完整。有不合理的地方希望各位指正
4756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
