el-table表格中el-table-column列多导致页面显示不完全

最新推荐文章于 2024-08-02 17:03:17 发布

车马去闲闲丶

最新推荐文章于 2024-08-02 17:03:17 发布

阅读量1.3k

点赞数 8

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44882744/article/details/135503832

版权

问题:

	看到的最后一项只显示了一半,其实后面还有好几列显示不完全,页面缩小的话就可以看到了,
	也可以看到页面滚动条拉到了最后

在这里插入图片描述
解决办法

原因:因为整个table表单没有给固定的宽度导致column超出了页面,但是它还是在当前页面,只是不显示

//解决办法
 		<div style="width: 90%;">   //切记不可以给100的宽
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="***" label="***"></el-table-column>
            <el-table-column prop="***" label="***"></el-table-column>
            <el-table-column prop="***" label="***"></el-table-column>
            <el-table-column prop="***" label="***"></el-table-column>
            <el-table-column prop="***" label="***"></el-table-column>
            ............................略
          </el-table>
        </div>


//style样式,添加横向滚动轴
 .el-table {
    /deep/ .el-table__body-wrapper {
      overflow-x: scroll !important; //直接设置横轴内容滚动条 即可撑高高度 还不影响使用
    }
  }