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

缓缓
  • 1.3k

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

回复
阅读 6k
2 个回答
✓ 已被采纳

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

看完其實你大概也知道要怎麼做了, 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
                }
            })
        }
    },
    
})

實際例子

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏