• 場景說明：
  1、列合并：需要在表格最后一列進(jìn)行合并，如圖：
  
  思路：相當(dāng)于是第二列的最后一欄（colSpan ）占比5列，第2列后面的4列最后一行（colSpan ）占比0。
• 代碼示例

<----html部分---->
 <a-table
        ref="table"
        size="middle"
        bordered
        :rowKey="(record, index) => index"
        :columns="columnsPart"
        :dataSource="dataSourcePart"
        :pagination="false"
        :loading="loading"
        :scroll="{ y: 'calc(100vh - 430px)' }">
      </a-table>
  columnsPart: [
          {
            title: "序號",
            dataIndex: "rowIndex",
            width: 60,
            align: "center",
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index, "rowIndex");
            }
          },
          {
            title: "第二列",
            align: "center",
            dataIndex: "structureName",
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index, "structureName");
            }
          },
          {
            title: "第三列",
            align: "center",
            dataIndex: "jobnoName",
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index);
            }
          },
          {
            title: "第四列",
            align: "center",
            dataIndex: "afterTaxPrice",
            scopedSlots: { customRender: "afterTaxPrice" },
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index);
            }
          },
          {
            title: "第五列",
            align: "center",
            dataIndex: "preTaxPrice",
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index);
            }
          },
          {
            title: "第六列",
            align: "center",
            dataIndex: "imgNum",
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index);
            }
          },
          {
            title: "第七列",
            align: "center",
            dataIndex: "preTaxAmount",
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index, "preTaxAmount");
            }
          },
          {
            title: "第八列",
            align: "center",
            dataIndex: "taxRate",
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index, "taxRate");
            }
          },
          {
            title: "第九列",
            align: "center",
            dataIndex: "taxAmount",
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index);
            }
          },
          {
            title: "第十列",
            align: "center",
            dataIndex: "afterTaxAmount",
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index, "afterTaxAmount");
            }
          },
          {
            title: "備注",
            align: "center",
            dataIndex: "remark",
            scopedSlots: { customRender: "remark" },
            ellipsis: true,
            customRender: (text, r, index) => {
              return this.changeCellFunc(text, index, "remark");
            }
          }
        ]

// 合并列
      changeCellFunc(text, index, type) {
        let temIndex = parseInt(index) + 1;
        const obj = {
          children: text,
          attrs: {}
        };
        if (type == "rowIndex") {
          return temIndex < this.dataSourcePart.length ? temIndex : "合計";
        }
        if (temIndex == this.dataSourcePart.length) {
          if (type == "taxRate") obj.attrs.colSpan = 2;
          if (type == "structureName") obj.attrs.colSpan = 5;
        }
        if (!type && temIndex == this.dataSourcePart.length) {
          obj.attrs.colSpan = 0;
        }
        return obj;
      },

• 行合并需求如圖：將指定列的多行合并成一行
  思路：和合并列差不多；第一列的第一行和第二行要合并成一行，需要將第一列的第一行的占比（rowSpan ）調(diào)整成 2，將第一列的第二行的占比（rowSpan ）調(diào)整成 0 ，如果不將第二行的占比調(diào)整成 0 的話，后面的列會按順序往后排。舉個例子，我們現(xiàn)在要將一些橘子放進(jìn)箱子里，為了防止顛簸，需要用那種井字隔板將水果整齊隔開放置，可以放置9個，但是有一個橘子長得太胖了，一個格子放不下，要占兩個格子，只能放8個，這時候如果硬要放9個，橘子們就會往后擠。（ps：例子舉得不太好，請各位湊合著理解一下哈哈哈）
• 代碼

 <a-table
   :rowKey="(record, index) => index"
    :bordered="true"
    size="middle"
    :columns="columns"
    :pagination="false"
    :data-source="tableData"
    :scroll="{ x: 1500, y: 'calc(100vh - 650px)' }">
    <template slot="useReason" slot-scope="text, record">
      {{ (dispatchReasonList[text] && dispatchReasonList[text].title) || "" }}
    </template>
  </a-table>
	columns: [
        {
          title: "第一列",
          dataIndex: "zyProviderName",
          width: 150,
          customCell: (record, rowIndex) => {
            return this.mergeCellsSlot(record, rowIndex);
          }
        },
        {
          title: "第2列",
          dataIndex: "zrProviderName",
          width: 150,
          customCell: (record, rowIndex) => {
            return this.mergeCellsSlot(record, rowIndex);
          }
        },
        {
          title: "第3列",
          dataIndex: "contName",
          width: 150,
          customCell: (record, rowIndex) => {
            return this.mergeCellsSlot(record, rowIndex);
          }
        },
        {
          title: "第4列",
          dataIndex: "useReason",
          width: 150,
          scopedSlots: {
            customRender: "useReason"
          },
          customCell: (record, rowIndex) => {
            return this.mergeCellsSlot(record, rowIndex);
          }
        },
        {
          title: "第5列",
          dataIndex: "profName",
          width: 220
        },
        {
          title: "第6列",
          dataIndex: "daysNum",
          width: 150
        },
        {
          title: "第7列",
          dataIndex: "daysPrice",
          width: 150
        },
        {
          title: "第8列",
          dataIndex: "amount",
          width: 150
        }
      ]
      // 合并單元格
      mergeCellsSlot(record, rowIndex) {
        // 開始下標(biāo)
        const index = this.tableData.findIndex((item) => item.id == record.id);
        // 需要合并的單元格數(shù)
        let rowSpanNum = 0;
        this.tableData.forEach((item) => {
          if (item.id == record.id) {
            rowSpanNum++;
          }
        });
        // 結(jié)束下標(biāo)
        let indexIdLength = index + rowSpanNum;
        return {
          style: {
            display: index < rowIndex && rowIndex < indexIdLength ? "none" : undefined
          },
          attrs: {
            rowSpan: rowIndex === index ? rowSpanNum : 1
          }
        };
      }

文章來源地址http://www.zghlxwxcb.cn/news/detail-559965.html

到了這里，關(guān)于ant-design-vue的table表格行合并和列合并的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！