element table自带合计行功能
只需将show-summary设置为true即可(可以查看官方api)element表格,默认为表格尾部添加合计行
在实际业务需求中,可能会要求合计行置顶,而不是展示为表格尾部,只需添加对应代码即可
(注:/deep/某些预处理器(例如Sass)可能无法>>>正确解析,改写为::v-deep即可,参照 Vue Loader 官网介绍)
/*添加以下两行css即可实现*/
::v-deep .el-table{
display:flex;
flex-direction:column;
}
::v-deep .el-table__body-wrapper{
order:1
}
/*如果表格有固定列,则需要添加以下两行代码*/
::v-deep .el-table__fixed-body-wrapper{
top:96px !important;
}
::v-deep .el-table__fixed-footer-wrapper{
z-index: 0;
}