项目场景:
横纵内容过多时,表格横向宽度超出后,滚动条没有出现
问题描述:
表格横向宽度超出后,滚动条没有出现,如下图所示
原因分析:
查了一下网上其他的解决方案感觉不是特别好,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>