el-tabs的el-tab-pane的name太长解决方法,或给tabs加横向滚动滑轮代码
时间: 2023-08-11 14:04:04 浏览: 184
手动动态改变el-tabs标签页顺序
如果 `el-tab-pane` 的 `name` 太长,可以使用 `label` 属性来显示一个更短的标签名称。例如:
```
<el-tabs>
<el-tab-pane label="Tab 1" name="tab1">Tab 1 Content</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">Tab 2 Content</el-tab-pane>
<el-tab-pane label="Tab 3" name="tab3">Tab 3 Content</el-tab-pane>
<el-tab-pane label="Tab 4" name="tab4">Tab 4 Content</el-tab-pane>
</el-tabs>
```
如果你想给 `el-tabs` 添加横向滚动滑轮,可以使用 CSS 样式来实现。例如:
```
.el-tabs__header {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
```
这将使 `el-tabs` 的头部区域可以横向滚动,并且头部中的标签不会换行。`-webkit-overflow-scrolling: touch;` 属性可以提高在移动设备上的滚动性能。
阅读全文