html实现tab页dome,谁能给个element的tab标签页的标签下拉选项的demo，就是label-content的用法...

這個牽涉到 Render Function 的使用，所以會比較複雜點，可以看下官方文檔了解下：Render 函數

看完其實你大概也知道要怎麼做了， element 文檔沒寫特別清楚，不過文檔寫不清楚去看下源碼就一切明瞭了：

可以看到如果有設置 labelContent 屬性，就會使用其來渲染標題部分，並傳遞兩個參數給我們使用

h => 其實就是 render 函數裡面的 createElement ，所以可以調用其來渲染組件

tab => 當前的 tab 實體

先搞個下拉式選單出來：

var select = Vue.extend({

template: `

$emit('change', v)" v-model="value" placeholder="请选择">

v-for="item in options"

:label="item.label"

:value="item.value">

`,

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 官網的例子)

{{selected}}

配置管理

角色管理

定时任务补偿

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

}

})

}

},

})