效果
在这里插入图片描述

实现

<el-table
                ref="offroomTable"
                border
                :header-cell-style="{ 'text-align': 'center', background: '#b1defd', height: '34px' }"
                :data="offroomTableList"
                :highlight-current-row="true"
                :height="screenHeight - 430"
                :span-method="arraySpanMethod"
                
              >
                <el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="proCode" />
                <el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="proName" />
                <el-table-column label="xxx" :show-overflow-tooltip="true" align="center" prop="ratifyYear" />
                <el-table-column label="说明" :show-overflow-tooltip="true" align="center" prop="conUnit" />
              </el-table>
   offroomTableList: [
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
        { proCode: 'xxx', proName: '', ratifyYear: '', conUnit: '' },
      ],

代码注解:
首先要判断是哪一列要进行合并,第一列要合并,所以列索引为0

const _row = this.getSpanArr(this.offroomTableList).one[rowIndex]
然后要处理索引,用this.getSpanArr方法处理原数组,.one[rowIndex]是处理后返回的是一个对象,里面是个数组 {one:[6,0,0,0,0,0,0]}
rowspan代表跨多少行合并
colspan代表跨多少列合并

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {      
        const _row = this.getSpanArr(this.offroomTableList).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },

定义一个空数组和索引为0的字段
循环数组,索引为0 的时候往数组里push一个1,这段代码不用去改,把else里item.proCode改成你自己的字段就可以了

当走else里的代码时,如果当前行和上一行的proCode的值相同,数组第0项循环+1

这里要解释一下,拿效果图示例,第一列有6行,索引为0 的时候push了一个1,也就是第0项的值为1,=>[{0:1}]

索引为1,也就是第二行的时候,第二行的proCode和上一行的proCode相同,第0项再加1,并且push一个0,
这个时候的数组是这样的,=>[{0:2},{1:0}],按这样循环完之后,数组也就是这样了,=>[{0:6},{1:0},{2:0},{3:0},{4:0},{5:0}]
(为了方便大家理解,写成这样,第[index]项对应第[index]项的值,真正的数组是[6,0,0,0,0,0])

如果当前项和上一项不一样,就push1,代表不被合并,独立占一行
最后讲这个数组返回,给它定义了一个名字one
希望解释的还算通俗,好理解,不清楚的可以随时问,欢迎

getSpanArr(arr) {
      if (arr) {
        const spanOneArr = []
        let concatOne = 0
        arr.forEach((item, index) => {
          if (index === 0) {
            spanOneArr.push(1)
          } else {        
            if (item.proCode === arr[index - 1].proCode) {
              // 第一列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1
              spanOneArr.push(0)
            } else {
              spanOneArr.push(1)
              concatOne = index
            }
          }
        })
        return { one: spanOneArr }
      }
    },
Logo

前往低代码交流专区

更多推荐