记录(伪)多行合计行效果
<template>
<el-table
:data="tableData"
:border="true"
height="624"
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 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 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 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 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 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>
<script>
import { mixins } from "./mixinHj";
export default {
name: 'table-heji',
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: 12,
dlxl: 0,
fqrdw: '01',
fqrdwmc: '组织01',
jkxl: 0,
temporary: 0,
tq: 0,
workTime: 132.76,
xscd: 0,
zf: 0
},
{
cycle: 12,
dlxl: 0,
fqrdw: '01',
fqrdwmc: '组织01',
jkxl: 0,
temporary: 0,
tq: 0,
workTime: 132.76,
xscd: 0,
zf: 0
},
{
cycle: 12,
dlxl: 0,
fqrdw: '01',
fqrdwmc: '组织01',
jkxl: 0,
temporary: 0,
tq: 0,
workTime: 132.76,
xscd: 0,
zf: 0
},
{
cycle: 12,
dlxl: 0,
fqrdw: '01',
fqrdwmc: '组织01',
jkxl: 0,
temporary: 0,
tq: 0,
workTime: 132.76,
xscd: 0,
zf: 0
},
{
cycle: 12,
dlxl: 0,
fqrdw: '01',
fqrdwmc: '组织01',
jkxl: 0,
temporary: 0,
tq: 0,
workTime: 132.76,
xscd: 0,
zf: 0
},
{
cycle: 12,
dlxl: 0,
fqrdw: '01',
fqrdwmc: '组织01',
jkxl: 0,
temporary: 0,
tq: 0,
workTime: 132.76,
xscd: 0,
zf: 0
},
],
statisticalData:[
{
cycle: 12,
dlxl: 0,
fqrdw: '01',
fqrdwmc: '组织01',
jkxl: 0,
temporary: 0,
tq: 0,
workTime: 132.76,
xscd: 0,
zf: 0
},
{
cycle: 12,
dlxl: 0,
fqrdw: '01',
fqrdwmc: '组织01',
jkxl: 0,
temporary: 0,
tq: 0,
workTime: 132.76,
xscd: 0,
zf: 0
}
],
patorlLoading:true
}
},
mixins: [mixins],
methods: {
/**
*@describe 获取表格数据
*/
getData() {
let vm = this;
//数据更新时需要表格重新布局
this.$nextTick(()=> {
//对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法
vm.$refs['patroTable'].doLayout();
})
}
}
}
</script>
<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: 23px;
width: calc(100% + 20px);
height: 1px;
position: absolute;
/*background-color: #a4a4a4;*/
border-top: 1px solid #a4a4a4;
}
}
// 平均值顶部的线的调整
/deep/.el-table__footer-wrapper{
border-top: 1px solid #a4a4a4;
tbody td{
background-color: transparent;
}
}
/deep/.el-table__fixed-footer-wrapper tbody td{
background-color: transparent;
}
// 把br改成span 换行
.count_row_span {
display: inline-block;
height: 24px;
width: calc(100%);
}
</style>
mixins.js
export const mixins = {
data() {
return {};
},
computed: {},
created() {},
mounted() {},
methods: {
/**
* @describe 表格最下方的多个【伪合并行==》因为实际是一个大的合计行】 ,如总计、整改率、检查率 数据行的填充方法
* !通过在插入数组数据时,直接插入p标签和<br\>换行符,达到多个合计行的效果
* @param {Object} param 列和数据
* @returns {Array} sums 平均值和总数
*/
getSummaryMethod (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 />总数</p> </div>;
return
}
/**
1.通过判断当前循环到哪个表格 column.property==>[表头字段名称]了,然后往sums数组里面的对应位置插入数据
** 通过 <br /> 实现换行==》多个合计行
*! 在数组里插入html标签后,只要通过 {} 将数据处理包裹起来,就不会再被当成字符串了
*? 方法一:case 'cycle': ===>一共有多少个表头,就有多少个case,用于根据表头,判断当前列,来生成这一列的最底部合并行的数据
方法二:多个case片段列名太麻烦 用一个include 直接遍历出所有
*/
console.log(Object.keys(vm.statisticalData[0]), '<----vm.statisticalData[0]')
let keyArray = Object.keys(vm.statisticalData[0]); //获取列名
if (keyArray.includes(column.property)) {
sums[index] = <div class='countClass'>
<p class="count_row">
{vm.statisticalData[0][column.property]}<br />
{vm.statisticalData[1][column.property]}
</p></div>
} else {
sums[index] = <p>/</p>
}
// 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
},
},
};
换行br标签改成span
export const mixins = {
data() {
return {};
},
computed: {},
created() {},
mounted() {},
methods: {
/**
* @describe 表格最下方的多个【伪合并行==》因为实际是一个大的合计行】 ,如总计、整改率、检查率 数据行的填充方法
* !通过在插入数组数据时,直接插入p标签和<br\>换行符,达到多个合计行的效果
* @param {Object} param 列和数据
* @returns {Array} sums 平均值和总数
*/
getSummaryMethod (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'>
<span class="count_row_span">平均值</span>
<span class="count_row_span">总数</span></p>
</div>;
return
}
/**
1.通过判断当前循环到哪个表格 column.property==>[表头字段名称]了,然后往sums数组里面的对应位置插入数据
** 通过 <br /> 实现换行==》多个合计行
*! 在数组里插入html标签后,只要通过 {} 将数据处理包裹起来,就不会再被当成字符串了
*? 方法一:case 'cycle': ===>一共有多少个表头,就有多少个case,用于根据表头,判断当前列,来生成这一列的最底部合并行的数据
方法二:多个case片段列名太麻烦 用一个include 直接遍历出所有
*/
let keyArray = Object.keys(vm.statisticalData[0]); //获取列名
if (keyArray.includes(column.property)) {
sums[index] = <div class='countClass'>
<p class="count_row">
<span class="count_row_span">{vm.statisticalData[0][column.property]}</span>
<span class="count_row_span">{vm.statisticalData[1][column.property]}</span>
</p></div>
} else {
sums[index] = <p>/</p>
}
// 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
// }
})
return sums
},
},
};