element-ui 2.x el-table去掉纵向滚动条并隐藏空白占位列

当table内容列过多时，可通过height属性设置table高度以固定table高度、固定表头，使table内容可以滚动

<el-table  :data="list" @row-click="rowClick">
  <el-table-column label="总数" align="center" prop="total"/>
  <el-table-column label="一般" align="center" prop="totalBlueAlerts"/>
  <el-table-column label="较重" align="center" prop="totalYellowAlerts"/>
  <el-table-column label="严重" align="center" prop="totalRedAlerts"/>
</el-table>

现在需求是右侧滚动条不好看，需要去除滚动条，并隐藏滚动条所占列的位置 这样加样式不需要使用height 也可以固定表头

.el-table {
  height: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;

  ::v-deep {
    .el-table__body-wrapper {
      height: 0;
      flex-grow: 1;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }
}

效果：

搞定