1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > element table el-table 添加横向滚动条 宽度超出时横向滚动条不出现 固定表头完美方案

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

时间:2020-08-22 08:58:59

相关推荐

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

项目场景:

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


问题描述:

表格横向宽度超出后,滚动条没有出现,如下图所示


原因分析:

查了一下网上其他的解决方案感觉不是特别好,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: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'},{date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '-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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。