element表格应用

合并相同的数据

<el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="numbers" label="期数" width="180"></el-table-column>
            <el-table-column prop="recommendname" label="推荐人"></el-table-column>
            <el-table-column prop="bookname" label="书名"></el-table-column>
          </el-table>

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.setTable(this.tableData,rowIndex,columnIndex)
        const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
      }
    },
    setTable(tableData,rowIndex,columnIndex){
      let spanTableArr = [],
          concatTable = 0;
      tableData.forEach((item,index)=>{
        if(index === 0){
          spanTableArr.push(1);
        }else{
          if((columnIndex === 0) && (item.numbers === tableData[index - 1].numbers)){ //第一列需合并相同内容的判断条件 期数相同
            spanTableArr[concatTable] += 1;
            spanTableArr.push(0);
          }else if((columnIndex === 1) && (item.numbers === tableData[index - 1].numbers) && (item.recommendname === tableData[index - 1].recommendname)){  //第二列需合并相同内容的判断条件 期数相同且推荐人相同
            spanTableArr[concatTable] += 1;
            spanTableArr.push(0);
          }else{
            spanTableArr.push(1);
            concatTable = index;
          };
        }
      });
      return  spanTableArr[rowIndex]
    },