【Vue】谁能给个element的tab标签页的标签下拉选项的demo，就是label-content的用法

Z时代
2024-01-10
分类：技术分享

element框架实现tabs切换，标签想加下拉列表，但是官方文档的label-content的属性是function，用法没有看明白。有没有demo可以参考。

回答

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

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

Tab Code
【Vue】谁能给个element的tab标签页的标签下拉选项的demo，就是label-content的用法

可以看到如果有設置 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
                }
            })
        }
    },
})