要在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>

在上面的代码中,我们将el-scrollbar组件包裹在el-table的外层,设置了一个固定的高度和宽度。这样当表格内容超出高度时,就会显示横线滚动条。请根据实际需求调整高度和宽度。

el-table如何设置横线滚动条

原文地址: https://www.cveoy.top/t/topic/i6Lc 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录