Element-ui 中tabs 标题过长解决办法

前言：在使用tabs 标签时，有的时候ttile很长，想要在超出一定值时出现省略号。

实现效果：

模板代码：

<template>
  <div class="tabs-app">
    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane :key="item.name"
                  v-for="(item) in editableTabs"
                  :label="item.title"
                  :name="item.name">
        {{item.content}}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

样式代码：

<style lang="scss" scoped>
// tabs标签标题过长解决样式
.tabs-app{
  /deep/ .el-tabs__item{
    position: relative;
    display: inline-block;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow:ellipsis;
    .el-icon-close{
      position: absolute;
      top: 13px;
      right: 3px;
    }
  }
  /deep/ .el-tabs__header{
    .is-closable:hover{
      padding-left: 10px;
      padding-right: 20px;
    }
  }
  /deep/ .el-tabs__nav{
    line-height: 10px;
  }
}
</style>

---

源代码：

<template>
  <div class="tabs-app">
    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane :key="item.name"
                  v-for="(item) in editableTabs"
                  :label="item.title"
                  :name="item.name">
        {{item.content}}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      editableTabsValue: '2',
      editableTabs: [{
        title: 'Tab 1',
        name: '1',
        content: 'Tab 1 content'
      }, {
        title: 'element tabs 标题过长element tabs 标题过长element tabs 标题过长element tabs 标题过长element tabs 标题过长',
        name: '2',
        content: 'Tab 2 content'
      }],
      tabIndex: 2
    }
  },
  methods: {
    handleTabsEdit (targetName, action) {
      if (action === 'add') {
        let newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        let tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }
        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
// tabs标签标题过长解决样式
.tabs-app{
  /deep/ .el-tabs__item{
    position: relative;
    display: inline-block;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow:ellipsis;
    .el-icon-close{
      position: absolute;
      top: 13px;
      right: 3px;
    }
  }
  /deep/ .el-tabs__header{
    .is-closable:hover{
      padding-left: 10px;
      padding-right: 20px;
    }
  }
  /deep/ .el-tabs__nav{
    line-height: 10px;
  }
}
</style>