Element UI el-table 横向滚动条实现 - 使用 el-scrollbar 组件

<template>
  <div>
    <el-scrollbar style='height: 200px;'>
      <el-table :data='tableData' style='width: 100%'>
        <el-table-column prop='name' label='姓名' width='180'></el-table-column>
        <el-table-column prop='age' label='年龄' width='180'></el-table-column>
        <el-table-column prop='address' label='地址' width='180'></el-table-column>
        <el-table-column prop='phone' label='电话' width='180'></el-table-column>
        <el-table-column prop='email' label='邮箱' width='180'></el-table-column>
        <el-table-column prop='job' label='职业' width='180'></el-table-column>
        <el-table-column prop='gender' label='性别' width='180'></el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
          { name: '张三', age: 18, address: '北京', phone: '123456', email: 'zhangsan@example.com', job: '工程师', gender: '男' },
          { name: '李四', age: 20, address: '上海', phone: '789012', email: 'lisi@example.com', job: '设计师', gender: '女' },
          { name: '王五', age: 22, address: '广州', phone: '345678', email: 'wangwu@example.com', job: '销售员', gender: '男' },
          { name: '赵六', age: 24, address: '深圳', phone: '901234', email: 'zhaoliu@example.com', job: '经理', gender: '女' },
        ]
      }
    }
  }
</script>
<p>在上面的代码中，我们将 el-scrollbar 组件包裹在 el-table 的外层，设置了一个固定的高度和宽度。这样当表格内容超出高度时，就会显示横线滚动条。请根据实际需求调整高度和宽度。</p>