<el-table>右侧有空白列解决办法

问题如图:

<el-table>右侧有空白列解决办法_第1张图片

 解决办法:.box 为本页面最外层的class名,保证各个页面样式不会互相污染。

.box::v-deep .el-table th.gutter {
    display: none;
    width: 0
  }
 
  .box ::v-deep.el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
  }
 
  .box::v-deep .el-table__body {
    width: 100% !important;
  }
  .box::v-deep .el-table__header{
    width: 100% !important;
  }

<el-table>右侧有空白列解决办法_第2张图片

原理:

在f12中看代码,可以看到 类名为 gutter的一列,这个是由于设置了 max-height 产生的,如果去掉了max-height还不管用,就直接隐藏。

<el-table>右侧有空白列解决办法_第3张图片 

你可能感兴趣的:(vue.js,elementui,javascript)