elementUI table 多行合计

记录(伪)多行合计行效果

<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
    },
  },
};