一、为什么
默认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; }