element-ui 合并相邻的相同行 span-method


vue

javascript

function getRowIndex(objArr, index) {
    return objArr[index]._rs === 0 ? getRowIndex(objArr, index - 1) : index;
}

const spanMethod = function(name) {
  // name 需要做相邻合并的属性名称
    var a = []; // 做一个二维数组
    
  return function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    console.log({ row, column, rowIndex, columnIndex, a })

    // 合并第nameClunmnIndex列
    if (column.property === name) {
        let aI = a[columnIndex] && a[columnIndex][rowIndex];
      console.log(1)

      if (!aI) {
          // 未判断过的进行相关处理
        if(!a[columnIndex]) {
          a[columnIndex] = [];
        }
        console.log(2)

        aI = {
            _rs: 1,
          _cs: 1,
          [name]: row[name],
        };
        console.log(3)

        a[columnIndex][rowIndex] = aI;
        console.log(4)

        if (rowIndex && a[columnIndex][rowIndex - 1][name] === row[name]) {
            // 如果不是第一个参数 且上一个参数和这一个参数相同
          console.log(5)

          // 隐藏这个参数
          aI._rs = 0;
          aI._cs = 0;
          
          a[columnIndex][
              getRowIndex(a[columnIndex], rowIndex - 1)
          ]._rs += 1;
        }

      }

      return [aI._rs, aI._cs]
      }
    };
}

var Main = {
    data() {
      return {
        tableData6: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987128',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      objectSpanMethod: spanMethod('id'),
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')