vue.js - 谁能给个element的tab标签页的标签下拉选项的demo,就是label-content的用法
本文介绍了vue.js - 谁能给个element的tab标签页的标签下拉选项的demo,就是label-content的用法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
element框架实现tabs切换,标签想加下拉列表,但是官方文档的label-content的属性是function,用法没有看明白。有没有demo可以参考。
解决方案
這個牽涉到 Render Function
的使用,所以會比較複雜點,可以看下官方文檔了解下:Render 函數
看完其實你大概也知道要怎麼做了, element
文檔沒寫特別清楚,不過文檔寫不清楚去看下源碼就一切明瞭了:
可以看到如果有設置 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
}
})
}
},
})
實際例子
这篇关于vue.js - 谁能给个element的tab标签页的标签下拉选项的demo,就是label-content的用法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文