el-table底部新增一栏不规则合计(小计)
项目需求:需要在指定列下方最后一行新增显示合计数目,只在指定的列下方显示单元格,即不规则合计
需求效果如下图:
解决过程
利用el-table中提供的table-slot
通过浏览器控制台查看每列元素,发现通过该标签上的width属性上有宽度信息
通过遍历该标签组即可获取每列宽度
// 通过遍历该标签组获取每列宽度
this.$refs.table.$refs.headerWrapper.querySelectorAll('col').forEach((item, index) => {
console.log(item.clientWidth)
})
<template>
<div class="content">
<el-table
ref="table"
:data="tableList"
:header-cell-style="{textAlign: 'center'}"
style="width: 100%"
v-loading="isLoading">
<el-table-column label="用户信息">
<el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
<el-table-column prop="phone" label="手机号码"></el-table-column>
<el-table-column prop="name" label="用户昵称"></el-table-column>
<el-table-column prop="address" label="服务地址"></el-table-column>
<el-table-column prop="address" label="服务社区"></el-table-column>
</el-table-column>
<el-table-column label="服务信息">
<el-table-column prop="title" label="服务标题"></el-table-column>
<el-table-column prop="type" label="服务类型"></el-table-column>
<el-table-column prop