How to customize the content of the element-ui tab page

Link:
http://element-cn.eleme.io/-sharp/.

Today, take a look at the tab component of elment-ui. The
sample code is as follows: 

<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>

Interface effect:

clipboard.png

tabdomcontent:

clipboard.png

el-tabs__content this class should be generated in the element-ui source code. What should I do if I want to customize the content of the tab page? Thank you

Vue.js element-ui
Apr.05,2021

just write your own code directly in < el-tab-pane > < / el-tab-pane >. I don't know if it can meet your needs. 

 <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>

< 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 >

it is recommended to complete the switching effect by loading subcomponents

Previous: Dede content model added picture field editing how not to display thumbnails in the preview area?

Next: The whole parent page of the iframe jump page in Wechat has also been redirected.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu