对于
el-tabs的
el-tab-pane的name太长的问题，可以考虑使用CSS样式控制其长度。比如可以给
el-tab-pane标签设置一个固定宽度，并使用CSS的text-overflow属性来控制文本溢出时的表现方式。具体代码如下：
```html
<template>
<
el-tabs type="border-card" style="width: 600px;">
<
el-tab-pane :lab
el="lab
el" name="1">
<p>内容1</p>
</
el-tab-pane>
<
el-tab-pane :lab
el="lab
el2" name="2">
<p>内容2</p>
</
el-tab-pane>
</
el-tabs>
</template>
<script>
export default {
data() {
return {
lab
el: '这是一个比较长的标签名字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
lab
el2: '短标签'
}
}
}
</script>
<style scoped>
.
el-tabs__item {
width: 100px; /* 设置固定宽度 */
text-overflow:
ellipsis; /* 文本溢出时用省略号表示 */
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /*
隐藏溢出部分 */
}
</style>
```
如果您想要在
el-tabs中添加横向滚动滑轮，可以使用CSS的overflow-x属性和::-webkit-scrollbar伪类来实现。具体代码如下：
```html
<template>
<div class="tabs-
container">
<
el-tabs type="border-card" class="scrollable-tabs">
<
el-tab-pane :lab
el="lab
el" name="1">
<p>内容1</p>
</
el-tab-pane>
<
el-tab-pane :lab
el="lab
el2" name="2">
<p>内容2</p>
</
el-tab-pane>
<
el-tab-pane :lab
el="lab
el3" name="3">
<p>内容3</p>
</
el-tab-pane>
<!-- 还可以添加更多的标签 -->
</
el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
lab
el: '标签1',
lab
el2: '标签2',
lab
el3: '标签3'
}
}
}
</script>
<style scoped>
.tabs-
container {
width: 600px;
overflow-x: auto; /* 设置横向滚动 */
white-space: nowrap; /* 文本不换行 */
}
.scrollable-tabs {
display: inline-block; /* 显示为行内块元素 */
}
.
el-tabs__item {
min-width: 100px; /* 最小宽度 */
padding: 0 10px; /* 左右内边距 */
}
/*
滚动条样式 */
::-webkit-scrollbar {
height: 6px;
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #c1c1c1;
}
</style>
```
以上代码中，我们给包含
el-tabs的div元素设置了一个固定宽度，并设置了横向滚动。将
el-tabs设置为行内块元素，并设置每个标签的最小宽度和左右内边距，使得标签在一行内可以显示。最后，使用CSS的::-webkit-scrollbar伪类来设置
滚动条的样式。
2505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
