elementui合并表格的单元格:span-method=“objectSpanMethod“

//testResult是要展示的数据,为数组
//objectSpanMethod是官方给定的绑定属性和对应的方法,该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

          ...

data(){
      return {
        spanArr: [],   //存放每一行记录的合并数
        position: 0,   //spanArr的索引
      }
  },
methods:{
    //用来返回this.spanArr数组的,定义每一行的 rowspan
    rowspan() {
           this.testResult.forEach((item,index) => {
             if( index === 0){
                 this.spanArr.push(1);   //第一行先占一行
                 this.position = 0;    //给第一行的索引为0
             }else{
              //  让下一行与上一行作比较
                 if(this.testResult[index].signList[0] === this.testResult[index-1].signList[0] ){
                     this.spanArr[this.position] += 1;   //如果下一行与上一行相同,那么spanArr(要合并的)增加一行
                     this.spanArr.push(0);      //当前行不显示
                 }else{
                     this.spanArr.push(1);   //如果第二行与第一行不相等,那么当前行自己占一行
                     this.position = index;
                 }
             }
         })
       },
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合并行
        // row是当前行,column是当前列,rowIndex是当前行的索引,columnIndex是当前列的索引
         if(columnIndex === 1){
             const _row = this.spanArr[rowIndex];  //合并行的行数,1代表独占一行,比1大代表合并若干行,0代表不显示
             const _col = _row>0 ? 1 : 0;   //行如果存在那么列就存在,行不存在那么列也就不存在
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
         //想对每行的哪几列进行比较就写哪些列
         if(columnIndex === 2){
             const _row = this.spanArr[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
         if(columnIndex === 3){
             const _row = this.spanArr[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
         if(columnIndex === 4){
             const _row = this.spanArr[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
         if(columnIndex === 5){
             const _row = this.spanArr[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
         if(columnIndex === 6){
             const _row = this.spanArr[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
         if(columnIndex === 7){
             const _row = this.spanArr[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
         if(columnIndex === 8){
             const _row = this.spanArr[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
         if(columnIndex === 9){
             const _row = this.spanArr[rowIndex];
             const _col = _row>0 ? 1 : 0;
             return {
                 rowspan: _row,
                 colspan: _col
             }
         }
     },
 }
this.rowspan();   //调用rowspan方法看自己的情况放置

你可能感兴趣的:(vue.js)