前言：在使用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>