element-ui tab页的内容如何自定义

Question

链接：
http://element-cn.eleme.io/#/...

今天看elment-ui的tab组件，
示例代码如下：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

界面效果：

很好奇，tab页的内容是怎么来的，然后查看dom元素，发现页面会增加content内容：

el-tabs__content 这个类应该是element-ui源码里面生成的，请问如果要自定义tab页的内容要怎么做呢？谢谢

Answer 1

直接在<el-tab-pane></el-tab-pane>中写你自己的代码就好，不知道能否满足你的需求。

 <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">
      <div>
        <h1 style="color: red">
        自定义tab内容
        </h1>
      </div>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>

Answer 2

<template>

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first" >
        <!-- <router-view></router-view> -->
        <!--父组件传递值给子组件 props关键字 -->
        <user :msg="message"></user>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="second" >
        <deploy @msgFunc="func"></deploy>
        <!-- <router-view name="second"></router-view> -->
    </el-tab-pane>
    <el-tab-pane label="角色管理" name="third" >
        <!-- <router-view name="third"></router-view> -->
        <user :msg="message"></user>
    </el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth" >
         <deploy :msg="message"></deploy>
        <!-- <router-view name="fourth"></router-view> -->
    </el-tab-pane>
 </el-tabs>

</template>
<script>
import user from './page/User'
import deploy from './page/Deploy'
export default {

data(){
    return {
       activeName:'first',
       message:'father message'
    }
},
components:{
    user,
    deploy
},
methods:{
    handleClick(tab, event){
        console.log(tab, event);
    },
    func(msg){
        console.log(msg);
    }
}

}
</script>

建议使用加载子组件的方式完成切换效果