Vue Element框架的table進行多行合並

一、表格中只合並一處

 

 

 

 

 

 

 如上圖所示，這里根據“倉庫”進行合並，相同倉庫的數據合並到一個倉庫列中。

實現代碼

tempelate：

 <el-table
      :data="dataList"
      :span-method="objectSpanMethod"
      size="mini"
      border
      highlight-current-row
      style="width: 100%; margin-top: 20px"
      @current-change="handleCurrentChange"
    >
</el-table>

ts:

  @Watch("dataList", { immediate: true })
  private onOrderOutLineIdChanged() {
    if (this.dataList.length > 0) {
      this.getSpanArr(this.dataList)
    }
  }

  private getSpanArr(data: any) {
    let pos = 0
    for (let i = 0; i < data.length; i++) {
      if (i === 0) {
        this.spanArr.push(1)
      } else {
        // 判斷當前元素與上一個元素是否相同
        if (
          data[i].storeId === data[i - 1].storeId &&
          data[i].store.type === data[i - 1].store.type
        ) {
          this.spanArr[pos] += 1
          this.spanArr.push(0)
        } else {
          this.spanArr.push(1)
          pos = i
        }
      }
    }
  }

  private objectSpanMethod(data: any) {
    if (this.dataList.length > 0) {
      if (data.columnIndex === 0 || data.columnIndex === 1) {
        const _row = this.spanArr[data.rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    }
  }

二、多處合並

 

 

 實現原理為再次寫一個方法去判斷第二處合並的信息，再在 “objectSpanMethod” 方法體內，通過判斷在當前需要合並的列中進行ruturn即可。

代碼為：

tempelate：

<el-table
      :data="dataList"
      :span-method="objectSpanMethod"
      size="mini"
      border
      style="width: 100%; margin-top: 20px"
    >
</el-table>

ts:

private spanArr = new Array<number>()
 private storeTypespanArr = new Array<number>()
   

  @Watch("dataList", { immediate: true })
  private onOrderOutLineIdChanged() {
    if (this.dataList.length > 0) {
      this.getSpanArr(this.dataList)
      this.getSpanArrStoreType(this.dataList)
    }
  }

  private getSpanArr(data: any) {
    let pos = 0
    for (let i = 0; i < data.length; i++) {
      if (i === 0) {
        this.spanArr.push(1)
      } else {
        // 判斷當前元素與上一個元素是否相同
        if (
          data[i].stockId === data[i - 1].stockId ||
          data[i].stock.productName === data[i - 1].stock.productName ||
          data[i].stock.description === data[i - 1].stock.description
        ) {
          this.spanArr[pos] += 1
          this.spanArr.push(0)
        } else {
          this.spanArr.push(1)
          pos = i
        }
      }
    }
  }

  private getSpanArrStoreType(data: any) {
    let pos = 0
    for (let i = 0; i < data.length; i++) {
      if (i === 0) {
        this.storeTypespanArr.push(1)
      } else {
        // 判斷當前元素與上一個元素是否相同
        if (
          data[i].store.type === data[i - 1].store.type &&
          (data[i].stockId === data[i - 1].stockId ||
            data[i].stock.productName === data[i - 1].stock.productName ||
            data[i].stock.description === data[i - 1].stock.description)
        ) {
          this.storeTypespanArr[pos] += 1
          this.storeTypespanArr.push(0)
        } else {
          this.storeTypespanArr.push(1)
          pos = i
        }
      }
    }
  }

  private objectSpanMethod(data: any) {
    if (this.dataList.length > 0) {
      if (data.columnIndex === 0 || data.columnIndex === 1) {
        const _row = this.spanArr[data.rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
      if (data.columnIndex == 2) {
        const _row = this.storeTypespanArr[data.rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    }
  }

注意：我這里控制兩處合並的方法分開寫了，自己寫的時候可以合並到一個方法里寫。懶得改了。