element-plus的el-scrollbar显示横向滚动条

Element Plus 的 el-scrollbar组件要显示横向滚动条，关键在于​​内容宽度必须超过其容器的可视宽度​​，并通过一些样式来确保滚动行为符合预期。下面是一个详细的配置指南和常见问题解决方法。

核心步骤与代码示例

1. 基本横向滚动配置

确保你的内容项的总宽度超过 el-scrollbar容器的宽度。这通常通过设置一个​​弹性布局（flex）​​ 容器并为子项设置​​固定或最小宽度​​来实现。

vue

<template> <el-scrollbar> <!-- 外层滚动条容器 --> <div class="scroll-container"> <!-- 内层滚动内容容器，宽度会超出 --> <div v-for="item in items" :key="item.id" class="scroll-item"> {{ item.content }} </div> </div> </el-scrollbar> </template> <script setup> // 你的数据 const items = [ { id: 1, content: '内容项1' }, { id: 2, content: '内容项2' }, // ... 确保有足够多的项以产生溢出 ]; </script> <style scoped> .scroll-container { display: flex; /* 启用弹性布局，使子项水平排列 */ width: max-content; /* 容器宽度随内容撑开，这是关键 */ } .scroll-item { flex-shrink: 0; /* 防止子项被压缩 */ min-width: 200px; /* 或 width: 200px; 给子项一个固定的宽度 */ padding: 20px; /* 其他样式... */ } </style>

2. 控制滚动条容器尺寸

你可以通过设置 el-scrollbar外层容器的宽度或直接使用 width/ max-width样式来限制可视区域，从而触发横向滚动。

vue

<template> <div class="outer-container"> <!-- 外层限制宽度的容器 --> <el-scrollbar> <div class="scroll-container"> <div v-for="item in items" :key="item.id" class="scroll-item"> {{ item.content }} </div> </div> </el-scrollbar> </div> </template> <style scoped> .outer-container { width: 100%; /* 或一个固定值，如 800px */ max-width: 100%; /* 防止溢出父容器 */ } .scroll-container { display: flex; width: max-content; } .scroll-item { flex-shrink: 0; min-width: 200px; } </style>

3. 处理隐藏的横向滚动条

如果横向滚动条意外出现或你想确保其显示，可以检查并调整样式。

• •

  ​​确保横向滚动条显示​​：有时内容宽度计算不准确。确保 .scroll-container的宽度确实超出了 el-scrollbar的可见区域。你可以暂时给 .scroll-container加一个 background-color来观察其实际宽度。

• •

  ​​意外出现横向滚动条​​：如果并非你想要横向滚动条，却意外出现了，这通常是由于​​内容元素的宽度、内边距（padding）、外边距（margin）或边框（border）​​ 计算错误，导致总宽度略微超出容器。

  解决方法是为包裹元素设置 overflow-x: hidden。

  css

  /* 如果不需要横向滚动，可以隐藏它 */ .el-scrollbar__wrap { overflow-x: hidden !important; }

4. 手动控制滚动 (可选)

el-scrollbar组件提供了 API 用于手动控制滚动位置，例如 setScrollLeft方法。

vue

<template> <div> <el-button @click="scrollToLeft">滚动到最左侧</el-button> <el-scrollbar ref="scrollbarRef"> <div class="scroll-container"> <div v-for="item in items" :key="item.id" class="scroll-item"> {{ item.content }} </div> </div> </el-scrollbar> </div> </template> <script setup> import { ref } from 'vue'; const scrollbarRef = ref(); // 获取 el-scrollbar 的引用 const scrollToLeft = () => { if (scrollbarRef.value) { // 设置横向滚动条距离左侧的位置为 0 scrollbarRef.value.setScrollLeft(0); } }; </script>

总结与注意事项

1. 1.

   ​​内容溢出是关键​​：横向滚动条出现的首要条件是内容总宽度 ​​大于​​ 滚动容器的可视宽度。

2. 2.

   ​​使用弹性布局​​：display: flex和 flex-shrink: 0是实现子项水平排列且不被压缩的常用方法。

3. 3.

   ​​容器宽度管理​​：使用 width: max-content让内容容器自然扩展，或在外层用固定宽度约束可视区域。

4. 4.

   ​​检查意外滚动​​：如果不需要横向滚动却出现了滚动条，检查子元素的盒模型（宽、内边距、外边距、边框），并使用 overflow-x: hidden修复。

5. 5.

   ​​浏览器调试​​：强烈建议使用浏览器的开发者工具（F12）检查 .el-scrollbar__wrap和内容容器的宽度，这是诊断滚动条问题最直接的方式。

通过上述步骤，你应该能有效地控制 el-scrollbar横向滚动条的显示与行为了。

实例1：QualityFileCategoryTree.vue

<script setup lang="ts" name="QualityFileCategoryTree">
......
</script>

<template>
  <el-scrollbar>
    <div class="scroll-container">
      <el-tree
        ref="treeRef"
        :data="treeData"
        node-key="value"
        :default-expand-all="true"
        :highlight-current="true"
        :expand-on-click-node="false"
        :indent="15"
        @node-click="onTreeNodeClick">
        <!-- 自定义节点内容，点击的节点字体变色加粗 -->
        <!-- 动态样式：通过<template #default>插槽自定义节点内容，使用:style绑定根据当前选择的节点值currentNode.value动态设置color和fontWeight -->
        <template #default="{ node, data }">
          <span
            :style="{
              color: currentNode?.value === data.value ? `#409EFF` : `#606266`,
              fontWeight: currentNode?.value === data.value ? `bold` : `normal`
            }">
            {{ node.label }}
          </span>
        </template>
      </el-tree>
    </div>
  </el-scrollbar>
</template>

<style scoped lang="scss">
.scroll-container {
  display: flex;
  width: max-content;
}
</style>

实例2：QualityFileCategoryTree.vue

<script setup lang="ts" name="QualityFileCategoryTree">
......
</script>

<template>
  <div class="outer-container">
    <el-scrollbar>
      <div class="scroll-container">
        <el-tree
          ref="treeRef"
          :data="treeData"
          node-key="value"
          :default-expand-all="true"
          :highlight-current="true"
          :expand-on-click-node="false"
          :indent="15"
          @node-click="onTreeNodeClick">
          <!-- 自定义节点内容，点击的节点字体变色加粗 -->
          <!-- 动态样式：通过<template #default>插槽自定义节点内容，使用:style绑定根据当前选择的节点值currentNode.value动态设置color和fontWeight -->
          <template #default="{ node, data }">
            <span
              :style="{
                color: currentNode?.value === data.value ? `#409EFF` : `#606266`,
                fontWeight: currentNode?.value === data.value ? `bold` : `normal`
              }">
              {{ node.label }}
            </span>
          </template>
        </el-tree>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.outer-container {
  height: 100%;
  width: 100%; /* 或一个固定值，如 800px */
  max-width: 100%; /* 防止溢出父容器 */
}
.scroll-container {
  display: flex;
  width: max-content;
}
</style>

应用效果：