Bootstrap

element ui table表格合计移到顶部

一、为什么

默认table 的show-summary显示在尾部,如果需要移动到顶部

二、如何移动

  • 没有固定列(通过样式属性order将body移动到后面去。默认的oder:0就排在了前面)
/* /deep/ 为深度操作符,可以穿透到子组件 */
::v-deep .el-table {
  display: flex;
  flex-direction: column;
}
::v-deep .el-table__body-wrapper {
  order: 1;
}
  • 有固定列(需要将固定列做同样设置,由于固定列设置了position:absolute,在设置order会不生效,需要将position:initial)
    /* 设置flex并配合order将本来放在最后位置的 */
    ::v-deep .el-table__fixed {
      display: flex;
      flex-direction: column;
    }
    ::v-deep .el-table__fixed-footer-wrapper,
    ::v-deep .el-table__fixed-body-wrapper,
    ::v-deep .el-table__fixed-header-wrapper {
      position: initial;
    }
    ::v-deep .el-table__fixed-body-wrapper {
      order: 1;
    }
    ::v-deep .el-table__fixed-footer-wrapper tbody td.el-table__cell {
      border-top: none;
    }
    /* 默认有1px去掉样式影响 */
    ::v-deep .el-table__fixed::before {
      height: 0;
    }

 

;