element-ui复杂table 表格实现

àì夳堔傛蜴生んèń 2022-12-19 09:25 294阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70][]

# 首先是表头的处理部分 #

![20201106172233805.png][]

<template slot-scope="scope">
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  {
       { name }}交接班统计
                </template>
                <el-table-column>
                  <template slot="header" slot-scope="scope">
                    统计时间：{
       { nowShow }}
                  </template>
                  <el-table-column prop="team" label="班组" width="50"/>
                  <el-table-column prop="FGunNo" label="枪号" width="100"/>
                  <el-table-column prop="startWorkTime" label="接班时间" width="150" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{
       { scope.row.startWorkTime | dateFormat }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="endWorkTime" label="交班时间" width="150" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{
       { scope.row.endWorkTime | dateFormat }}</span>
                    </template>
                  </el-table-column>
                </el-table-column>
    
                <el-table-column>
                  <template slot="header" slot-scope="scope">
                    日期: {
       { dateShow }}
                  </template>
                  <el-table-column prop="startFSumGas" label="接班底数" width="90" show-overflow-tooltip/>
                  <el-table-column prop="endFSumGas" label="交班底数" width="90" show-overflow-tooltip/>
                  <el-table-column prop="startFSerialNo" label="接班流水号" width="90" show-overflow-tooltip/>
                  <el-table-column prop="endFSerialNo" label="交班流水号" width="90" show-overflow-tooltip/>
                </el-table-column>
    
                <el-table-column>
                  <template slot="header" slot-scope="scope">
                    加气站站点: {
       { name }}
                  </template>
                  <el-table-column prop="gasCount" label="加气次数" width="90" show-overflow-tooltip/>
                  <el-table-column prop="teamFsumGas" label="班累气量" width="90" show-overflow-tooltip/>
                  <el-table-column prop="gasOffset" label="气量偏差" width="80" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <span>{
       { scope.row.gasOffset | keepTwoBitNum }}</span>
                    </template>
                  </el-table-column>
                </el-table-column>
    
                <el-table-column>
                  <template slot="header" slot-scope="scope">
                    操作人: {
       { operator }}
                  </template>
                  <el-table-column prop="FSumGas" label="合计气量" width="120" show-overflow-tooltip/>
                  <el-table-column prop="Fmoney" label="合计金额" width="120">
                    <template slot-scope="scope">
                      <span>{
       { scope.row.Fmoney | keepTwoBitNum }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="现金量">
                    <el-table-column prop="FCashSumGas" label="气量" width="120" show-overflow-tooltip/>
                    <el-table-column prop="FCashMoney" label="金额" width="120">
                      <template slot-scope="scope">
                        <span>{
       { scope.row.FCashMoney | keepTwoBitNum }}</span>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
    
                <el-table-column>
                  <template slot="header" slot-scope="scope">
                    计量数据: {
       { count }}
                  </template>
                  <el-table-column label="支付宝支付">
                    <el-table-column prop="FPaySumGas" label="气量" width="120" show-overflow-tooltip/>
                    <el-table-column prop="FPayMoney" label="金额" width="120">
                      <template slot-scope="scope">
                        <span>{
       { scope.row.FPayMoney | keepTwoBitNum }}</span>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column label="微信支付">
                    <el-table-column prop="FWxSumGas" label="气量" width="120" show-overflow-tooltip/>
                    <el-table-column prop="FWxMoney" label="金额" width="120">
                      <template slot-scope="scope">
                        <span>{
       { scope.row.FWxMoney | keepTwoBitNum }}</span>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
    
              </el-table-column>
            </template>

使用element-ui table表格提供的多级表头效果 ===》 只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

# 列表内容处理部分 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 1][]

表头代码、已经对应实现方法代码

<el-table v-show="mode" id="tables" :data="tableData" :summary-method="getSummaries" :span-method="objectSpanMethod" stripe show-summary style="width: 100%; font-size: 12px;">
            
          </el-table>

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            if (columnIndex === 0) {
              return {
                rowspan: 1,
                colspan: 8
              }
            }
            if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
    
          if (rowIndex !== 0 && columnIndex === 0) { // 第一列
            this.mergeLineMethod()
            const _row = this.mergeLineArr[rowIndex]
            const _col = _row > 0 ? 1 : 0
            console.log(_row + '------' + _col)
            return {
              rowspan: _row,
              colspan: _col
            }
          }
          if (row.total) {
            if (columnIndex === 1) {
              return {
                rowspan: 1,
                colspan: 7
              }
            }
            if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
    
          if (row.FGunNo === '班组小计') {
            if (columnIndex === 1) {
              return {
                rowspan: 1,
                colspan: 7
              }
            }
            if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
        }

mergeLineMethod() { // 处理合并表格数据
          if (this.mergeLineFlag) return
          this.mergeLineFlag = true
    
          const mergeLine = this.tableData
          mergeLine.forEach((item, i) => {
            if (i === 0) {
              this.mergeLineArr.push(1)
              this.mergeLineIndex = 0
            } else {
              // 判断当前元素与上一个元素是否相同,是就给之前相同的第一个+1，并且数组添加一个0
              if (mergeLine[i].team === mergeLine[i - 1].team) {
                this.mergeLineArr[this.mergeLineIndex] += 1
                this.mergeLineArr.push(0)
              } else { // 如果与前一个不相同，则追加一个新从1开始的数字，此时更新mergeLineIndex的值
                this.mergeLineArr.push(1)
                this.mergeLineIndex = i
              }
            }
          })
        }

使用element-ui table表格提供的合并行或列 ===》

**说明：通过给`table`传入`span-method`方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行`row`、当前列`column`、当前行号`rowIndex`、当前列号`columnIndex`四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表`rowspan`，第二个元素代表`colspan`。 也可以返回一个键名为`rowspan`和`colspan`的对象。**

## 解析1： ##

下面对其进行解析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 2][]

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 3][]

## 解析2： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 4][]

![20201106174732206.png][]

只对第一列，除了第一行。进行合并。 3 行 1列  其他两个 返回 0,0 表示被合并

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 5][]

## 解析3 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 6][]

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 7][]

## 解析4 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 8][]

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 9][]

下面附上我的数据结构

{
        "data":[
            {
                "gasCount":2761,
                "FPaySumGas":0,
                "FCashMoney":1075.9000000000049,
                "FPayMoney":0,
                "FCashSumGas":17198.06,
                "FWxSumGas":0,
                "teamFsumGas":17198.06,
                "team":"合计",
                "FSumGas":17198.06,
                "Fmoney":1075.9000000000049,
                "FWxMoney":0,
                "gasOffset":0
            },
            {
                "gasCount":2701,
                "FCashMoney":1052.4000000000055,
                "FPayMoney":0,
                "FCashSumGas":16810.81,
                "FGunNo":"班组小计",
                "teamFsumGas":16810.81,
                "team":"1",
                "FSumGas":16810.81,
                "gasOffset":0,
                "FPaySumGas":0,
                "FWxSumGas":0,
                "Fmoney":1052.4000000000055,
                "FWxMoney":0
            },
            {
                "gasCount":2629,
                "FCashMoney":1024.5500000000065,
                "FPayMoney":0,
                "FCashSumGas":16464.09,
                "startFSerialNo":"6",
                "startWorkTime":"2020-08-04 14:15:29",
                "FGunNo":1,
                "endFSumGas":"13477.34",
                "teamFsumGas":16464.09,
                "team":"1",
                "endWorkTime":"2020-08-04 14:15:29",
                "FSumGas":16464.09,
                "gasOffset":0,
                "startFSumGas":"4289.08",
                "FPaySumGas":0,
                "endFSerialNo":"6",
                "FWxSumGas":0,
                "Fmoney":1024.5500000000065,
                "FWxMoney":0
            },
            {
                "gasCount":72,
                "FCashMoney":27.850000000000005,
                "FPayMoney":0,
                "FCashSumGas":346.72,
                "startFSerialNo":"6",
                "startWorkTime":"2020-08-04 14:16:09",
                "FGunNo":2,
                "endFSumGas":"15756.55",
                "teamFsumGas":346.72,
                "team":"1",
                "endWorkTime":"2020-08-04 14:16:09",
                "FSumGas":346.72,
                "gasOffset":0,
                "startFSumGas":"10560.74",
                "FPaySumGas":0,
                "endFSerialNo":"6",
                "FWxSumGas":0,
                "Fmoney":27.850000000000005,
                "FWxMoney":0
            },
            {
                "gasCount":60,
                "FCashMoney":23.500000000000004,
                "FPayMoney":0,
                "FCashSumGas":387.25,
                "FGunNo":"班组小计",
                "teamFsumGas":387.25,
                "team":"2",
                "FSumGas":387.25,
                "gasOffset":0,
                "FPaySumGas":0,
                "FWxSumGas":0,
                "Fmoney":23.500000000000004,
                "FWxMoney":0
            },
            {
                "gasCount":30,
                "FCashMoney":11.75,
                "FPayMoney":0,
                "FCashSumGas":219.85,
                "startFSerialNo":"6",
                "startWorkTime":"2020-08-04 14:16:09",
                "FGunNo":1,
                "endFSumGas":"16383.69",
                "teamFsumGas":219.85,
                "team":"2",
                "endWorkTime":"2020-08-04 14:16:09",
                "FSumGas":219.85,
                "gasOffset":0,
                "startFSumGas":"16919.17",
                "FPaySumGas":0,
                "endFSerialNo":"6",
                "FWxSumGas":0,
                "Fmoney":11.75,
                "FWxMoney":0
            },
            {
                "gasCount":12,
                "FCashMoney":4.7,
                "FPayMoney":0,
                "FCashSumGas":55.54,
                "startFSerialNo":"6",
                "startWorkTime":"2020-10-04 14:16:09",
                "FGunNo":2,
                "endFSumGas":"4010.92",
                "teamFsumGas":55.54,
                "team":"2",
                "endWorkTime":"2020-10-04 14:16:10",
                "FSumGas":55.54,
                "gasOffset":0,
                "startFSumGas":"13348.08",
                "FPaySumGas":0,
                "endFSerialNo":"6",
                "FWxSumGas":0,
                "Fmoney":4.7,
                "FWxMoney":0
            },
            {
                "gasCount":18,
                "FCashMoney":7.050000000000001,
                "FPayMoney":0,
                "FCashSumGas":111.86,
                "startFSerialNo":"6",
                "startWorkTime":"2020-08-04 14:16:09",
                "FGunNo":3,
                "endFSumGas":"16774.66",
                "teamFsumGas":111.86,
                "team":"2",
                "endWorkTime":"2020-08-04 14:16:09",
                "FSumGas":111.86,
                "gasOffset":0,
                "startFSumGas":"2466.15",
                "FPaySumGas":0,
                "endFSerialNo":"6",
                "FWxSumGas":0,
                "Fmoney":7.050000000000001,
                "FWxMoney":0
            }
        ],
        "errmsg":"成功",
        "errno":200,
        "timestamp":1604656826932
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70]: /images/20221120/030c8d9c1f554f9a82fa7ac8481a20f0.png
[20201106172233805.png]: /images/20221120/bd98db3391d94df0bbb330e299ca56f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201106172811473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201106174312992.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020110617441559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201106174052115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[20201106174732206.png]: https://img-blog.csdnimg.cn/20201106174732206.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201106175052606.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201106175125726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201106175029459.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201106175938931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201106180001180.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4Mzc3MTkw,size_16,color_FFFFFF,t_70