element table el-table 添加横向滚动条宽度超出时横向滚动条不出现，固定表头完美方案

最新推荐文章于 2026-05-05 08:03:58 发布

原创最新推荐文章于 2026-05-05 08:03:58 发布 · 3.1w 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

element 专栏收录该内容

3 篇文章

订阅专栏

在Vue.js项目中，当Element Table组件的宽度超过屏幕时，滚动条未正常显示。通过F12检查元素，发现样式设置为`overflow: visible;`。为解决此问题，可以调整样式为`overflow-x: auto;`，实现固定表头并展示横向滚动条的完美方案。

项目场景：

横纵内容过多时，表格横向宽度超出后，滚动条没有出现

问题描述：

表格横向宽度超出后，滚动条没有出现，如下图所示
在这里插入图片描述

原因分析：

查了一下网上其他的解决方案感觉不是特别好，f12查看了下element官网示例的样式，发现下图
在这里插入图片描述

而我界面的样式生成却是overflow: visible;

解决方案：

直接修改样式就可以

<template>
  <div class='testbox'>
    <el-row style="height: 300px;width: 800px;">
      <el-table :data="tableData" style="width:100%" :height="400">
        <el-table-column prop="date" label="日期" width="100" fixed>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="100">
        </el-table-column>
        <el-table-column prop="date" label="日期" width="100">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="300">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="date" label="日期">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" fixed="right">
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      ]
    };
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {
  },
}
</script>
<style lang='scss' scoped>
.testbox {
    /deep/ .el-table--scrollable-x .el-table__body-wrapper {
        overflow: auto !important;
    }
    /deep/.el-table__fixed-right-patch {
    background-color: #f5f7fa !important;
}
}
</style>