### 如何实现 `
el-tabs` 表头的自适应布局
为了使 `
el-tabs` 的表头能够实现自适应布局，可以通过调整 CSS 和
JavaScript 来
动态计算并分配每个 tab 的宽度。以下是具体的实现方式：
####
动态设置 Tab 宽度
通过监听窗口大小变化事件以及组件挂载后的初始化操作，可以
动态调整每个 tab 的宽度以适配父容器的尺寸。
```
javascript
<template>
<div class="tab
-container">
<
el-tabs v
-mod
el="activeTab" @tab
-click="handleClick">
<
el-tab
-pane
v
-for="(item, index) in
tabs"
:key="index"
:lab
el="item
.lab
el"
:name="item
.name"
>
{{ item
.content }}
</
el-tab
-pane>
</
el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab
: '1',
tabs: [
{ lab
el: '选项一', name
: '1', content
: '内容一' },
{ lab
el: '选项二', name
: '2', content
: '内容二' },
{ lab
el: '选项三', name
: '3', content
: '内容三' }
]
};
},
mounted() {
this
.adjust
TabsWidth();
window
.addEventListener('resize', this
.adjust
TabsWidth);
},
beforeDestroy() {
window
.removeEventListener('resize', this
.adjust
TabsWidth);
},
methods
: {
handleClick(tab) {
console
.log(`
切换到 ${tab
.props
.name}`);
},
adjust
TabsWidth() {
const container = document
.queryS
elector('
.el-tabs__nav');
if (!container) return;
let totalWidth = container
.offsetWidth;
Array
.from(container
.children)
.forEach((child) => {
child
.style
.flexBasis = `${totalWidth / container
.children
.length}px`;
});
}
}
};
</script>
<style scoped>
.tab
-container >>>
.el-tabs__header {
display
: flex;
}
.tab
-container >>>
.el-tabs__item {
flex
-grow
: 1;
text
-align
: center;
}
</style>
```
上述代码实现了以下功能：
- 使用 Flexbox 布局来均匀分布所有的
Tabs[^1]。
- 在
页面加载完成后
调用一次 `adjust
TabsWidth()` 方法，并绑定窗口 resize 事件以便实
时更新
Tabs 的宽度[^2]。
####
解决滚动条
问题
如果存在较多的
Tabs 导致水平方向超出可视范围，则需要引入滚动机制或者隐藏多余的
Tabs。这里推荐一种简单的方案——当检测到溢出
时启用横向滚动条。
```css
/* 添加滚动样式 */
.tab
-container >>>
.el-tabs__nav
-scroll {
overflow
-x
: auto;
}
.tab
-container >>>
.el-tabs__nav
.is
-stretch {
white
-space
: nowrap;
}
```
此部分利用了原生浏览器行为，在必要情况下展示滚动条而不是破坏整体设计结构[^3]。
---
### 总结
以上方法结合了
动态脚本控制与灵活的 CSS 属性配置，既满足了基础需求又兼顾用户体验优化。对于更复杂场景下的定制化开发，还可以进一步探索插件扩展或其他第三方库的支持能力。
当使用el-tabs作为菜单导航，每个标签页需调用接口获取数据时，会按标签数量重复调用。解决方法是在<router-view>中判断当前标签是否匹配当前路由，或者避免使用路由出口而直接使用组件形式展示，以防止不必要的接口请求。
扫一扫
5389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
