vue el-table的合并单元格与拆分单元格

 

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

<el-table       ref="table"       v-loading="loading"       :data="tableData"       class="tb-edit"       border       stripe       :height="tableHeight"       :header-cell-style="{'background':'#F5F4F7'}"       :span-method="objectSpanMethod"     >       <el-table-column         type="index"         label="序号"         width="60"         align="center"       />       <el-table-column         prop="stritemname"         label="物品"         min-width="180"       />       <el-table-column         prop="stritemstyle"         label="型号"         min-width="180"       />       <el-table-column         prop="strmadefactname"         label="生产厂商"         min-width="180"       />       <el-table-column         prop="strpurchaseunit"         label="单位"         align="center"         width="70"       />       <el-table-column         prop="dblquantity"         label="采购数量"         width="90"         align="center"       />       <el-table-column         prop="dbldeliveryquantity"         label="配货数量"         width="90"         align="center"       />       <el-table-column         prop="strbatchcode"         label="批次"         width="150"         align="center"       />       <el-table-column         prop="validity"         label="有效期"         width="180"         align="center"       />       <el-table-column         prop="dblprice"         label="单价"         width="100"         align="right"       />       <el-table-column         prop="totalprice"         label="金额"         width="100"         align="right"       />       </el-table>

　　

 methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const fields = ['stritemname', 'stritemstyle', 'strmadefactname', 'strpurchaseunit', 'dblquantity']
      if (fields.includes(column.property)) {
        const cellValue = row['lngitemid']
        if (cellValue && fields.includes(column.property)) {
          const prevRow = this.tableData[rowIndex - 1]
          let nextRow = this.tableData[rowIndex + 1]
          if (prevRow && prevRow['lngitemid'] === cellValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            // return { rowspan: row.rowspan, colspan: 1 }
            let countRowspan = 1
            while (nextRow && nextRow['lngitemid'] === cellValue) {
              nextRow = this.tableData[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
      }
    },
}