适用于 iview table组件根据相同名称合并单元格(vue2)

163 阅读1分钟

第一次发,请各位大佬多多指教

方法

export default  {
  data() {
    return {
      rowspans: []
    }
  },
  methods: {
    computeRowspan(columns, data) {
      this.rowspans = [];
      columns.forEach((item, index) => {
        if (item.rowMerge) {
          let curColRowspan = [];
          let rowSpan = 0;
          let fast = 0;
          let slow = 0;
          while (fast < data.length) {
            if (data[fast][item.key] === data[slow][item.key]) {
              curColRowspan[fast] = 0;
              if (fast === data.length - 1) {
                curColRowspan[slow] = fast - slow + 1;
              }
              rowSpan++;
              fast++;
            } else {
              curColRowspan[slow] = rowSpan;
              rowSpan = 0;
              slow = fast;
            }
          }
          this.rowspans[index] = curColRowspan;
        }
      })
    },
    getRowspan(columnIndex, rowIndex) {
      if (this.rowspans.length === 0) {
        return [1, 1];
      }
      const value = this.rowspans[columnIndex];
      if (value) {
        return [value[rowIndex], value[rowIndex] === 0 ? 0 : 1];
      } else {
        return [1, 1];
      }
    },
  }
}

使用

// 1、mixins混入
mixins[name];
// 2、columns添加属性
columns:[
    {
        key: 'aa',
        rowMerge: true,
    },
    {
        key: 'bb',
        rowMerge: true,
    }
],
data: [],
// 3 、监听需要合并的数据
watch: {
    data: {
        handler(val,oldVal){
          if(val) {
            this.computeRowspan(this.columns,val);
          }  
        },
        deep:true,
    },
}
// 4、返回rowspan和colspan
handleSpan({ row, column, rowIndex, columnIndex }) {    
	return this.getRowspan(columnIndex,rowIndoex);
}