看完其實妳大概也知道要怎麼做了， element 文檔沒寫特別清楚，不過文檔寫不清楚去看下源碼就壹切明瞭了：
Tab Code
可以看到如果有設置 labelContent 屬性，就會使用其來渲染標題部分，並傳遞兩個參數給我們使用
h => 其實就是 render 函數裏面的 createElement ，所以可以調用其來渲染組件
tab => 當前的 tab 實體
先搞個下拉式選單出來：
var select = Vue.extend({
template: `
<el-select @change="(v) => $emit('change', v)" v-model="value" placeholder="請選擇">
<el-option
v-for="item in options"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
`,
data() {
return {
options: [{
value: '選項1',
label: '黃金糕'
}, {
value: '選項2',
label: '雙皮奶'
}, {
value: '選項3',
label: '蚵仔煎'
}, {
value: '選項4',
label: '龍須面'
}, {
value: '選項5',
label: '北京烤鴨'
}],
value: ''
}
}
})
沒啥好講的，最重要的是記得要把事件繼續 emit 出來 : @change="(v) => $emit('change', v)"
那 tab 部分就可以這樣做 (懶得打直接 copy 官網的例子）
<el-tabs :active-name="activeName">
<el-tab-pane label="用戶管理" :label-content="render" name="first">{{selected}}</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>
new Vue({
el: '#app',
data() {
return {
activeName: 'first',
selected: "",
}
},
methods: {
onTabSelected(value) {
this.selected = value
},
render(h, tabInstance) {
// h = createElement，上面有講過羅～
// select = 就是壹開始定義的下拉式選單
return h(select, {
// 監聽事件 change
on: {
change: this.onTabSelected
}
})
}
},
})