美文网首页
el-tabs怎么改变activeName点击变色

el-tabs怎么改变activeName点击变色

作者: undefined汪少 | 来源:发表于2019-01-18 14:59 被阅读0次

设置出始值

.el-tabs__item{

background-color:#cccccc !important;

color:#666666; !important;

margin: 5px; !important;

}

设置点击activeName变色的值

.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{

color:#e64545 !important;

}

就只写这么多 任性 哈哈

div部分

<button class="showInputclass"> 稿件管理</button>

    <button class="showInputclass" @click="showInputone"  v-if="buttonshoucangif"> +添加收藏夹 </button>

    <div class="showInputonewropclass"> 

<input type="text" v-model="vmodelinputh" v-if="showInputoneif" class="inputshou">

<button @click="addTab(editableTabsValue2)" class="showInputoneclass" v-if="showInputoneif">

  完成

  </button>

<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">

    <el-tab-pane

      v-for="(item, index) in editableTabs2"

      :key="item.name"

      :label="item.title"

      :name="item.name"

    >

      {{item.content}}

    </el-tab-pane>

  </el-tabs>

VUE.JS部分

data:{

editableTabsValue2: '1',

        editableTabs2: [{

          title:"默认收藏夹" ,

          name: '1',

          content: 'Tab默认收藏夹'

        },

        {

          title: '收藏夹1',

          name: '2',

          content: 'Tab收藏夹1内荣'

        }

        ],

        tabIndex: 2,

        vmodelinputh:"",

}

methods:{

showInputone(){

    this.showInputoneif=true

    },

      addTab(targetName) {

              let newTabName = ++this.tabIndex + '';

              this.editableTabs2.push({

                title: this.vmodelinputh,

                name: newTabName,

                content: 'New Tab content'

              });

              this.editableTabsValue2 = newTabName;

              this.buttonshoucangif=false

              this.vmodelinputh=""

            },

            removeTab(targetName){

              let tabs = this.editableTabs2;

              let activeName = this.editableTabsValue2;

              if (activeName === targetName) {

                alert("确定删除收藏夹吗")

                tabs.forEach((tab, index) => {

                  if (tab.name === targetName) {

                    let nextTab = tabs[index + 1] || tabs[index - 1];

                    if (nextTab) {

                      activeName = nextTab.name;

                    }

                  }

                });

                this.editableTabsValue2 = activeName;

                this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);

            }

          },

}

相关文章

网友评论

      本文标题:el-tabs怎么改变activeName点击变色

      本文链接:https://www.haomeiwen.com/subject/spendqtx.html