【element-ui】element-ui 如何将table的汇总行放在第一行

图片描述
如图原型所示，element-ui如何将total行放在第一行？
原本我们也是放在最后一行，结果开会老板说他想第一眼就看到汇总数据，完了我们产品觉得这样很有道理，把原型改了要求放第一行。。。官网里头都是放最后一行，找不到放第一行的。

回答：

自己写汇总的方法，其实也就是对各属性分别求和，再在tableData使用unshift就行了

回答：

添加以下两行CSS，即可将合计行放在第一行：

/* /deep/ 为深度操作符，可以穿透到子组件 */
/deep/ .el-table {
  display: flex;
  flex-direction: column;
}
/* order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方 */
/deep/ .el-table__body-wrapper {
  order: 1;
}

注意表格不要设置 fixed 属性，会有样式冲突。如果确实要启用 fixed 属性，需再添加以下两行CSS作为补偿修复：

/ 表格启用 fixed 属性后，样式会错乱，下面2句是补偿修复 /
/deep/ .el-table__fixed-body-wrapper {
top: 96px !important;
}
/deep/ .el-table__fixed-footer-wrapper {
z-index: 0;
}

回答：

老哥，有解决吗？ 我今天也遇到了，老板说 要第一眼就看到 合计数据。

以上是 【element-ui】element-ui 如何将table的汇总行放在第一行 的全部内容， 来源链接： utcz.com/a/152775.html

回到顶部