vue动态生成多个tab页
1、 template部分用v-for循环动态生成<a-tabs default-active-key="1" @change="callback"><a-tab-pane v-for="(item,index) in itemlist" :key="item.id" :tab="item.name"><div><br /><a-row>
·
1、 template部分用v-for循环动态生成
<a-tabs default-active-key="1" @change="callback">
<a-tab-pane v-for="(item,index) in itemlist" :key="item.id" :tab="item.name">
<div>
<br />
<a-row>
<a-col>
<a-card>
<Chart :ref="`myChart${index}`" seriesTitle="title1" rateTitle="title2" :title="title"
:xAxisData="xAxisData" :seriesData="seriesData" :rateData="rateData" />
</a-card>
</a-col>
</a-row>
...
</div>
</a-tab-pane>
</a-tabs>
2、methods中callback方法可以获取到tab的是几个tab,编号从1开始
callback(val) {
let index = val-1
console.log(index)
},
3、向动态组件生成的组件传递数据,注意动态组件引用使用下标0获取
this.$refs[`mysqlChart${index}`][0].renderChart(xAxisData,seriesData,seriesData);
更多推荐
已为社区贡献2条内容
所有评论(0)