vue.js el-table動態(tài)單元格列合并方式

更新時(shí)間：2024年02月28日 09:52:16 作者：Lemon今天學(xué)習(xí)了嗎

這篇文章主要介紹了vue.js el-table動態(tài)單元格列合并方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、業(yè)務(wù)需求

一個(gè)展示列表，表格中有一部分列是根據(jù)后端接口動態(tài)展示，對于不同類型的數(shù)據(jù)展示效果不一樣。

如果接口返回?cái)?shù)據(jù)是’類型1‘的，則正常展示，如果是’類型2‘的數(shù)據(jù)，則合并當(dāng)前數(shù)據(jù)的動態(tài)表格。

二、實(shí)現(xiàn)思路

1、先將普通表格實(shí)現(xiàn)，不考慮合并效果；

2、在表格上對要合并的單元格類型進(jìn)行區(qū)分；

3、在表格上使用:span-method="arraySpanMethod"方法觸發(fā)表格；

4、在arraySpanMethod方法內(nèi)接收數(shù)據(jù)處理合并，確定從哪一列開始合并到哪一列合并結(jié)束；

三、代碼展示

<el-table
    ref="table"
    size="mini"
    height="100%"
    :data="tableData"
    :span-method="arraySpanMethod"
    :header-cell-style="{
      background: '#f5f7fa',
      fontWeight: 'bold',
      color: '#303133'
    }"
    border
  >
    <el-table-column
      type="index"
      header-align="center"
      align="center"
      label="序號"
      width="50"
    ></el-table-column>
    <el-table-column
      width="120"
      prop="indexShowName"
      label="名稱"
      show-overflow-tooltip
    ></el-table-column>
    <el-table-column
      width="80"
      prop="type"
      label="類型種類"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        {{ scope.row.type === '1' ? '類型1' : '類型2' }}
      </template>
    </el-table-column>
    <el-table-column
      v-for="(item, index) in tableColumns"
      :key="index"
      width="80"
      :label="item.year"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        <!-- 類型1展示name -->
        <div
          v-if="scope.row.type === '1'"
          style="text-align: center"
        >
          {{
            scope.row.uploadValueList[index]?.uploadValueName
          }}
        </div>
        <!-- 類型2展示value -->
        <div v-else>
          {{ scope.row.uploadValueList[index].uploadValue }}
        </div>
      </template>
    </el-table-column>
    <el-table-column
      width="160"
      prop="reportDate"
      label="上報(bào)時(shí)間"
      show-overflow-tooltip
    ></el-table-column>
    <el-table-column
      width="195"
      label="操作"
      header-align="center"
      align="center"
      fixed="right"
    >
      <template slot-scope="scope">
        <el-button
          size="small"
          style="color: #409eff; padding: 0"
          type="text"
          @click="detailClick(scope.row)"
          >數(shù)據(jù)明細(xì)</el-button
        >
      </template>
    </el-table-column>
  </el-table>

// --------------methods方法--------------------
 
// 右側(cè)表格
  initTable() {
    const params = {
      pageNum: this.pages.pageIndex,
      pageSize: this.pages.pageSize,
    }
    this.tableLoading = true
    //api接口調(diào)用xxx
    xxx(params)
      .then((res) => {
        if (res.code === 200) {
          const { total } = res.result
          // const { records, total } = res.result
          //后端接口數(shù)據(jù)返回形式如下：
          const records = [
            {
              indexShowName: '測試001',
              type: '1',
              reportDate: '2023-12-01 15:53:46',
              uploadValueList: [
                {
                  id: '1',
                  year: '2021年',
                  uploadValue: '0',
                  uploadValueName: '完全符合'
                },
                {
                  id: '2',
                  year: '2022年',
                  uploadValue: '0',
                  uploadValueName: '完全符合'
                },
                {
                  id: '3',
                  year: '2023年',
                  uploadValue: '0',
                  uploadValueName: '完全符合'
                },
                {
                  id: '4',
                  year: '2024年',
                  uploadValue: '0',
                  uploadValueName: '完全符合'
                }
              ]
            },
            {
              indexShowName: '測試002',
              type: '2',
              reportDate: '2023-12-01 13:45:53',
              uploadValueList: [
                {
                  id: '5',
                  year: '2021年',
                  uploadValue: '99.00'
                },
                {
                  id: '6',
                  year: '2022年',
                  uploadValue: '98.00'
                },
                {
                  id: '7',
                  year: '2023年',
                  uploadValue: '77.00'
                },
                {
                  id: '8',
                  year: '2024年',
                  uploadValue: '34.00'
                }
              ]
            }
          ]
          if (records && records.length > 0) {
            // 使用第一個(gè)元素的 uploadValueList 來創(chuàng)建列
            this.tableColumns = records[0].uploadValueList.map((item) => ({
              year: item.year, // 使用 year 作為列的標(biāo)簽
              id: item.id // 用于做key
            }))
          }
          this.tableData = records
          this.pages.total = total
        } else {
          this.$message.error(res.message)
        }
      })
      .finally(() => {
        this.tableLoading = false
      })
  },
 
  // 單元格合并 {當(dāng)前行row、當(dāng)前列column、當(dāng)前行號rowIndex、當(dāng)前列號columnIndex}
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    // 類型1,且動態(tài)數(shù)據(jù)長度>1
    if (row.type === '1' && row?.uploadValueList?.length > 1) {
      const len = row?.uploadValueList?.length
      // 合并從下標(biāo)為0開始的【下標(biāo)為3的第四列，動態(tài)數(shù)據(jù)長度】
      if ( columnIndex > 2 && columnIndex <= 2 + Number(len) ) {
        return {
          rowspan: 1,
          colspan: columnIndex === 3 ? len : 0
        }
      }
    }
  },