vue使用Element框架tabs基础用法

Element框架tabs基础用法

首先我们可以登录 element-ui 官网查看tabs的基本用法

当然简单的tabs切换已经实现，但是当我们的标签页越多用的组件越多我们可以这么写

<div class="tagTabs">
    <el-tabs v-model="activeName">
    <el-tab-pane v-for="(item, i) in list" :key="i" :label="item.label" :name="item.name">
      <component :is="item.component"></component>
    </el-tab-pane>
  </el-tabs>
  </div>
  <script>
import TagManagement from './TagManagement'
import BatchOperation from '../BatchOperation/Index'
export default {
  name: 'TagTabs',
  components: {TagManagement, BatchOperation},
  filters: {

  },
  data () {
    return {
      activeName: 'TagManagement',
      list: [
        {
          label: '标签管理',
          name: 'TagManagement',
          component: TagManagement
        },
        {
          label: '认证信息关键词管理'
        },
        {
          label: '批量操作',
          name: 'BatchOperation',
          component: BatchOperation
        }
      ]
    }
  },
  methods: {},
  mounted () {}
}
</script>

运用component标签可以实现动态渲染组件， component是vue内置组件