zoukankan      html  css  js  c++  java
  • elemntui-tab添加图标

    
            <el-tabs :before-leave="moreState" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="用户管理" name="first">用户管理</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-tab-pane name="more" class="more-btn">
                    <div slot="label">
                        <i class="iconfont icon-input"></i>
                        <i class="iconfont icon-enable"></i>
                        <i class="iconfont icon-lock"></i>
                    </div>
                </el-tab-pane>
            </el-tabs>
    
      activeName: 'second'
    
      methods: {
            post(mess) {
                console.log(mess);
            },
    
            handleClick(tab, event) {
                console.log(tab, event);
                if (this.activeName == "second") {
    
                } else if (this.activeName == "third") {
    
                } else if (this.activeName == "fourth") {
    
                }
            },
           
            moreState(tab, event) {
                if (tab == 'more') {
                    console.log("/////", tab, event);
                    return false;
                }
            }
        },
    
    
    <style lang="scss" scoped>
    /deep/ #tab-more {
         calc(100% - 200px);
        text-align: right;
    }
    
    /deep/ .el-tabs__nav {
         calc(100% - 200px);
    }
    </style>
    

    tab的最右边 通常有一些按钮。
    这些按钮就是做一操作。
    我们可以利用钩子函数 来做的moreState
    
  • 相关阅读:
    Kafka 探险
    Semaphore 源码分析
    ReentrantLock 与 AQS 源码分析
    synchronized 原理分析
    ConcurrentHashMap 源码分析
    LinkedHashMap 源码分析
    HashMap 源码分析
    ArrayList 源码分析
    TCP 详解
    proxifier配合ss,实现全局代理
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12839875.html
Copyright © 2011-2022 走看看