vue3 如何实现 el-tab 大小固定内容滚动

飞鱼

已于 2024-05-31 14:11:05 修改

阅读量372

点赞数 8

文章标签： javascript vue.js 前端

于 2024-05-31 14:10:03 首次发布

本文链接：https://blog.csdn.net/2401_83416930/article/details/139351080

版权

在vue文件中添加如下样式：

.fixed-tab {
  flex: auto;
  display: flex;
  flex-direction: column;
  width: 500px;
  height: 600px;
}
.fixed-tab ::v-deep(.el-tabs__content) {
  flex-grow: 1;
  overflow: auto !important;
  padding: 0;
}

根据需要，将 fixed-tab 中的width和height调整到适合的大小。

在 <el-tab ...> 标签中添加class：

<el-tabs v-model="activeName" class="fixed-tab">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>