vue el-table的合並單元格與拆分單元格

 

 

 

<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 }
            }
          }
        }
      }
    },
}