el-table动态合并表格行单元格

data数据

        tableData: [{
            id: '后勤部门',
            name: '陈总',
            amount1: '234',
            amount2: '3.2',
            amount3: 10
          }, {
            id: '后勤部门',
            name: '陈总',
            amount1: '165',
            amount2: '4.43',
            amount3: 12
          }, {
            id: '后勤部门',
            name: '王小虎',
            amount1: '324',
            amount2: '1.9',
            amount3: 9
          }, {
            id: '人力党务部',
            name: '王小虎',
            amount1: '621',
            amount2: '2.2',
            amount3: 17
          }
          , {
            id: '人力党务部',
            name: '老实说',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
          , {
            id: '人力党务部',
            name: '老实说',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
          , {
            id: '人力党务部',
            name: '老实说',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
          , {
            id: '人力党务部',
            name: '王小虎',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
          , {
            id: '政企信息化',
            name: '我来了',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
          , {
            id: '政企信息化',
            name: '王小虎',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
          ],
          spanArr:[]

将表格的span-method设置为'arraySpanMethod',getSpanArr可以放在获取表格数据后

// 表格合并处理 
getSpanArr(){   
      // 当前遍历到第几行
      let pos = 0
      // 初始化spanArr,否则切换表格数据时,spanArr会累加
      this.spanArr = [] 
    for(let i = 0; i < info.length; i++){
          if(i === 0){
            this.spanArr.push(1)
            pos = 0
          }else{
            if(info[i].id === info[i-1].id){
              this.spanArr[pos] += 1
              this.spanArr.push(0)
            }else{
              this.spanArr.push(1)
              pos = i
            }
          }
        }
    }
        // 合并表格列
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0) {
            let r = this.spanArr1[rowIndex]
            let c = this.spanArr1[rowIndex] > 0 ? 1 : 0
            return [r, c];
          }
          if (columnIndex === 1) {
            let r = this.spanArr2[rowIndex]
            let c = this.spanArr2[rowIndex] > 0 ? 1 : 0
            return [r, c];
          }
        },

最终效果

el-table动态合并表格行单元格_第1张图片

你可能感兴趣的:(vue.js,javascript,ecmascript,elementui)