elementUI-table组件之多行合计行
elementUI-table组件之多行合计
·
需要效果
废话不多说，直接上代码…
<template>
<el-table
:data="tableData"
:border="true"
height="638"
class="tableList"
ref="patroTable"
show-summary
:summary-method="getSummaryMethod"
style="width: 100%;">
<el-table-column fixed prop="fqrdwmc" label="组织" show-overflow-tooltip align="center"></el-table-column>
<el-table-column label="工单总数" show-overflow-tooltip align="center">
<el-table-column prop="cycle" label="周期性" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="temporary" label="临时性" show-overflow-tooltip align="center"></el-table-column>
</el-table-column>
<el-table-column label="设备数量" show-overflow-tooltip align="center">
<el-table-column prop="zf" label="站房" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="jkxl" label="架空线路" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="dlxl" label="电缆线路" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="tq" label="台区" show-overflow-tooltip align="center"></el-table-column>
</el-table-column>
<el-table-column prop="xscd" label="巡视距离(米)" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="workTime" label="工作时长(小时)" show-overflow-tooltip align="center"></el-table-column>
</el-table>
<!-- 一开始用另一个表格拼接起来 --->
<!-- <el-table
:data="statisticalData"
height="100"
border
:show-header="false"
style="width: 100%;">
<el-table-column fixed prop="fqrdwmc" label="组织" show-overflow-tooltip align="center"></el-table-column>
<el-table-column label="工单总数" show-overflow-tooltip align="center">
<el-table-column prop="cycle" label="周期性" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="temporary" label="临时性" show-overflow-tooltip align="center"></el-table-column>
</el-table-column>
<el-table-column label="设备数量" show-overflow-tooltip align="center">
<el-table-column prop="zf" label="站房" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="jkxl" label="架空线路" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="dlxl" label="电缆线路" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="tq" label="台区" show-overflow-tooltip align="center"></el-table-column>
</el-table-column>
<el-table-column prop="xscd" label="巡视距离(米)" show-overflow-tooltip align="center"></el-table-column>
<el-table-column prop="workTime" label="工作时长(小时)" show-overflow-tooltip align="center"></el-table-column>
</el-table> -->
</template>
data () {
return {
tableLoading:false,
tableData:[
{
cycle: 12
dlxl: 0
fqrdw: "01"
fqrdwmc: "组织01"
jkxl: 0
temporary: 0
tq: 0
workTime: 132.76
xscd: 0
zf: 0
},
{
cycle: 4
dlxl: 4
fqrdw: "02"
fqrdwmc: "组织02"
jkxl: 3
temporary: 4
tq: 0
workTime: 119.38
xscd: 0
zf: 4
},
{
cycle: 1
dlxl: 1
fqrdw: "03"
fqrdwmc: "组织03"
jkxl: 1
temporary: 0
tq: 0
workTime: 0.16
xscd: 0
zf: 0
},
{
cycle: 88
dlxl: 24
fqrdw: "04"
fqrdwmc: "组织04"
jkxl: 16
temporary: 49
tq: 43
workTime: 12770.6
xscd: 0
zf: 52
},
],
statisticalData:[
{
cycle: 12
dlxl: 0
fqrdw: "01"
fqrdwmc: "组织01"
jkxl: 0
temporary: 0
tq: 0
workTime: 132.76
xscd: 0
zf: 0
},
{
cycle: 26
dlxl: 7
fqrdwmc: "平均值"
jkxl: 5
temporary: 13
tq: 11
workTime: 3256
xscd: 0
zf: 14
},
{
cycle: 105
dlxl: 29
fqrdwmc: "总数"
jkxl: 20
temporary: 53
tq: 43
workTime: 13023
xscd: 0
zf: 56
},
],
patorlLoading:true
}
},
methods:{
/**
* @describe 表格最下方的多个【伪合并行==》因为实际是一个大的合计行】 ，如总计、整改率、检查率 数据行的填充方法
* !通过在插入数组数据时，直接插入p标签和<br\>换行符，达到多个合计行的效果
* @param {Object} param 列和数据
* @returns {Array} sums 平均值和总数
*/
getSummaryMethod (param) {
// console.log(param)
let vm = this
const { columns,data } = param
const sums = []
if(columns.length === 0) return
columns.forEach((column, index) => {
if (index === 0) {
// sums[index] ===> 就是根据index==0 找到的第一列 的 最下方的合并行
sums[index] = <div class='countClass'><p class="count_row">平均值<br /><br />总数</p> </div>;
return
}
/**
1.通过判断当前循环到哪个表格 column.property==>[表头字段名称]了，然后往sums数组里面的对应位置插入数据
** 通过 <br /> 实现换行==》多个合计行
*! 在数组里插入html标签后，只要通过 {} 将数据处理包裹起来，就不会再被当成字符串了
*? case 'cycle': ===>一共有多少个表头，就有多少个case，用于根据表头，判断当前列，来生成这一列的最底部合并行的数据
*/
switch (column.property) {
// 第一列的合并行数据
// ! sums[index] ===> 就是根据column.property 找到的对应列 的 最下方的合并行
// ? {this.statisticalData.cycle} ===> 获取获取后端返回数据中，【cycle】对象的总计cycle
// ===> 注意，填充数据的顺序要跟名称行对应好
case 'cycle':
sums[index] = <div class='countClass'><p class="count_row">
{vm.statisticalData[0].cycle}<br /><br />
{vm.statisticalData[1].cycle}
</p></div>
// sums[index] = <p class="count_row">
// {vm.statisticalData[0].cycle}<br/>
// <br/>
// {vm.statisticalData[1].cycle}
// </p>
break
// 第二列的合并行数据
case 'temporary':
sums[index] = <div class='countClass'><p class="count_row">
{vm.statisticalData[0].temporary}<br /><br />
{vm.statisticalData[1].temporary}
</p></div>
break
case 'zf':
sums[index] = <div class='countClass'><p class="count_row">
{vm.statisticalData[0].zf}<br /><br />
{vm.statisticalData[1].zf}
</p></div>
break
case 'jkxl':
sums[index] = <div class='countClass'><p class="count_row">
{vm.statisticalData[0].jkxl}<br /><br />
{vm.statisticalData[1].jkxl}
</p></div>
break
case 'dlxl':
sums[index] = <div class='countClass'><p class="count_row">
{vm.statisticalData[0].dlxl}<br /><br />
{vm.statisticalData[1].dlxl}
</p></div>
break
case 'tq':
sums[index] = <div class='countClass'><p class="count_row">
{vm.statisticalData[0].tq}<br /><br />
{vm.statisticalData[1].tq}
</p></div>
break
case 'xscd':
sums[index] = <div class='countClass'><p class="count_row">
{vm.statisticalData[0].xscd}<br /><br />
{vm.statisticalData[1].xscd}
</p></div>
break
case 'workTime':
sums[index] = <div class='countClass'><p class="count_row">
{vm.statisticalData[0].workTime}<br /><br />
{vm.statisticalData[1].workTime}
</p></div>
break
default:
sums[index] = <p>/</p>
break
}
}
})
console.log(sums,'平均值--总计');
return sums
},
/**
*@describe 获取表格数据
*/
getData() {
let vm = this;
//数据更新时需要表格重新布局
this.$nextTick(()=> {
//对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
vm.$refs['patroTable'].doLayout();
})
}
}
平均值下的线
<style scoped lang="scss">
// 用表格拼接时的样式
// #patorlWorkOrderTable{
// border: 1px solid #acb3b9;
// border-radius: 4px;
// .el-table--border, .el-table--group{
// border: none;
// }
// .tableList.el-table--border:after,.tableList.el-table--group:after,.tableList.el-table:before{
// background-color: #acb3b9;
// z-index: 5;
// }
// }
// 线的位置和颜色以及宽度的调整
.countClass,.countClassCell{
position: relative;
:first-child::after{
content: '';
left: -10px;
bottom: 33px;
width: 115%;
height: 1px;
position: absolute;
background-color: #acb3b9;
}
}
// 平均值顶部的线的调整
/deep/.el-table__footer-wrapper{
border-top: 1px solid #acb3b9;
tbody td{
background-color: transparent;
}
}
/deep/.el-table__fixed-footer-wrapper tbody td{
background-color: transparent;
}
</style>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)