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
    
  • 相关阅读:
    xss学习笔记
    【转】Python中的正则表达式(re)
    数据隐藏技术揭秘笔记
    几道排列组合题的总结
    Notepad++来比较文件
    快捷键总结
    进制转换
    leetcode刷题(三)
    leetcode刷题(二)
    leetcode刷题(一)
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12839875.html
Copyright © 2011-2022 走看看