element ui table表格合计移到顶部

最新推荐文章于 2024-07-19 11:52:43 发布

jings_1171

最新推荐文章于 2024-07-19 11:52:43 发布

阅读量1.5k

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/qq_35001542/article/details/128079766

版权

这篇博客主要介绍了如何通过CSS样式调整Element UI的Table组件，将默认位于底部的汇总行显示到顶部。通过使用`::v-deep`深度选择器，改变`el-table`和`el-table__body-wrapper`的显示方式和顺序，实现这一效果。对于有固定列的情况，需要额外处理固定列的样式，确保其正确显示。同时，为了消除样式影响，还调整了边框和伪元素的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、为什么

默认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;
}