ElementUI问题处理笔记 - table组件之小计行

项目需求是小计行显示在表格内容上面，实现此需求添加如下CSS代码即可

.el-table {
  display: flex;
  flex-direction: column;
}
.el-table .el-table__body-wrapper {
  order: 1;
}

但是引入了新的问题，如果表格固定高度且一开始内容为空，异步加载数据后，小计行下边框不可见了，参见如下演示：

这是因为flex布局默认子元素flex-shrink为1，小计行容器被压缩了，导致内部表格显示不全，添加如下代码可解决

/* 解决小计行下边框不可见问题 */
.el-table > * {
  flex-shrink: 0;
}

不过这段css又引入了新的问题 data赋值后el-table__body-wrapper的高度没有自动变化导致其高度超出了el-table,最终溢出的内容不可见了 解决如下：data赋值后重新layout

//为解决小计行下边框不可见问题加入了一段css，导致了表格body高出超出容器问题，重新执行表格layout
this.$nextTick(() => {
  this.$refs.table.doLayout()
})