element（table）合并相同数据的列

最新推荐文章于 2024-06-12 13:03:03 发布

柑子~

最新推荐文章于 2024-06-12 13:03:03 发布

阅读量1.6k

点赞数 4

分类专栏： vue element 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/apppws/article/details/126222888

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

element

1 篇文章 0 订阅

订阅专栏

element（table）合并相同数据的列（自看）

    <el-table
              size="mini"
              :data="electricityList"
              style="width: 100%;height: auto;"
              :header-cell-style="{ 'font-weight': 'normal', 'text-align': 'center' }"
              height="240"
              :summary-method="getSummaries"
              show-summary
              :span-method="objectSpanMethod"
              :row-class-name="rowClassName"
              border
              ref="tb"
            >
            <el-table-column
                label="序号"
                prop="energyNoid"
                width="60px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="电表编号/名称"
                prop="energyNo"
              >
              </el-table-column>
              <el-table-column
                label="电费单价(元/度)"
                prop="unitPrice"
              >
              </el-table-column>
              <el-table-column
                label="上次抄表时间"
                prop="lastWriterTime"
              >
                <template slot-scope="scope">
                  {{scope.row.lastWriterTime |timeReplace}}
                </template>
              </el-table-column>
              <el-table-column
                label="上次抄表人"
                prop="lastUserName"
              >
              </el-table-column>
              <el-table-column
                label="上次读数"
                prop="lastNumbers"
              >
              </el-table-column>
              <el-table-column
                label="本次抄表时间"
                prop="thisWriterTime"
              >
                <template slot-scope="scope">
                  {{scope.row.thisWriterTime |timeReplace}}
                </template>
              </el-table-column>
              <el-table-column
                label="本次抄表人"
                prop="thisUserName"
              >
              </el-table-column>
              <el-table-column
                label="最新读数"
                prop="writerNumbers"
              >
              </el-table-column>
              <el-table-column
                label="用量"
                prop="totalUsage"
              >
              </el-table-column>
              <el-table-column
                label="费用"
                prop="totalPrice"
              >
              </el-table-column>
            </el-table>

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // data ：需要修改的列数和列的属性 第一列从0开始
      const data = [
        { columnIndex: 3, value: 'lastWriterTime' },
        { columnIndex: 4, value: 'lastUserName' },
        { columnIndex: 6, value: 'thisWriterTime' },
        { columnIndex: 7, value: 'thisUserName' }
      ];
      for (let index = 0; index < data.length; index++) {
        if (columnIndex === data[index].columnIndex) {
          const _row = this.filterData(this.electricityList, data[index].value)[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      }
    },
    // 根据是否有相同数据返回一个如[2,0,3,0,0]格式的数组(公共的)
    filterData(arr, value) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          // name 修改
          if (item[value] === arr[index - 1][value]) {
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return spanOneArr
    }