a-tabs动态使用子组件

一、需求

弹窗实现多个tab页的切换，并且表单过长的在弹窗内实现滚动

二、实现方法

1、使用a-tabs实现表单切换

2、使用a-card实现弹窗内滚动，也可以使用css样式实现

a、a-card实现滚动需要设置高度，同时设置竖向可滚动

b、需要滚动的外层设置css样式

 

3、动态使用子组件，使用 <component>（一个用于渲染动态组件或元素的“元组件”） 进行渲染子组件

注意： :is ：绑定的是需要调用的组件

 :props ：绑定的是需要传给子组件的参数

 :ref ：绑定的是子组件的标识（标识返回的是一个数组，如果需要直接使用子组件中的方法可以使用 this.$refs.a[0].show() )

三、总体示例代码

<template>
      <a-tabs type="card" :activeKey="activeKey" @change="onTabChange">
        <a-tab-pane v-for="(tabItem, index) in tabsList" :key="index + 1" :tab="tabItem.title" :disabled="(index !== 0 && openType === 1)">
          <a-card :bordered="false" :body-style="{ height: '77vh', overflowY: 'auto' }" v-if="activeKey === index+1">
            <component :is="tabItem.component" :props="tabItem.props" :ref="tabItem.id" @refreshList="refreshList" />
          </a-card>
        </a-tab-pane>
      </a-tabs>
</template>

<script>
import a from './a'
import b from './b'

const tabsList = [
  {
    title: '子组件1',
    component: a,
    id: 'aId',
    props: {}
  },
  {
    title: '子组件2',
    component: b,
    id: 'bId',
    props: {
      id: ''
    }
  }
]
export default {
 components: {
    a: () => import('./a'),
    b: () => import('./b')
  },
 methods: {
    onTabChange(key) {
      this.activeKey = key
      if (key === 1) {
        setTimeout(() => {
          this.$refs.a[0].show()
        }, 100)
      }
    }
  }
}
</script>