element table合计（修改样式，自定义值，第一行展示,自定义合计）

白臻

已于 2024-05-04 08:40:04 修改

阅读量842

点赞数 1

分类专栏： vue 文章标签： vue.js javascript typescript elementui

于 2023-09-09 10:54:05 首次发布

本文链接：https://blog.csdn.net/weixin_44166849/article/details/132774561

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

设置合计第一行展示并且修改合计行的样式

在这里插入图片描述

<el-table				
	border
	size="small"
	:data="[]"
	show-summary
	sum-text="预期成分"
	>
	<el-table-column label="类别" prop="poolName" />
	</el-table>
	<style lang="scss" scoped>
	/* /deep/ 为深度操作符，可以穿透到子组件 */
	::v-deep .el-table {
	    display: flex;
	    flex-direction: column;
  	}
	 /* order默认值为0，只需将表体order置为1即可移到最后，这样总计行就上移到表体上方 */
	 ::v-deep .el-table__body-wrapper {
    	order: 1;
  	}
	 /* 合计样式的修改*/
	 ::v-deep .el-table__footer-wrapper tbody td {
		color: #409eff;
		cursor: pointer;
		text-align: center;
	}
	::v-deep .el-table__footer-wrapper tbody td:first-child {
		color: #000000;
		cursor: auto;
		text-align: center;
	}
</style>