ANT DESIGN VUE表格合并某一列

没合并之前：

合并之后：

官方文档：

column

实现代码：

1.html

<a-table
                    :scroll="{ y: 'calc(100vh - 690px)' }"
                    :customRow="customRow"
                    :columns="findIpTable"
                    :data-source="findIpTableData"
                    :pagination="false"
                  >
                   <!--eslint-disable-next-line-->
                    <template slot="title" slot-scope="currentPageData"><span class="mediumWord">发现资源</span></template>
                  </a-table>

2.js 

<script>
export default {
  data() {
    return {
      findIpTableData: [
        {
          key: "1",
          systemName: "S1800",
          ipAddress: "121.121.121.121",
          serialNumber: "1",
        },
        {
          key: "2",
          systemName: "S1800",
          ipAddress: "121.121.121.121",
          serialNumber: "1",
        },
        {
          key: "3",
          systemName: "S1800",
          ipAddress: "121.121.121.121",
          serialNumber: "1",
        },
        {
          key: "4",
          systemName: "D1800",
          ipAddress: "121.121.121.121",
          serialNumber: "2",
        },
        {
          key: "5",
          systemName: "D1800",
          ipAddress: "121.121.121.121",
          serialNumber: "2",
        },
        {
          key: "6",
          systemName: "D1800",
          ipAddress: "121.121.121.121",
          serialNumber: "2",
        },
        {
          key: "7",
          systemName: "G1800",
          ipAddress: "121.121.121.121",
          serialNumber: "3",
        },
        {
          key: "8",
          systemName: "G1800",
          ipAddress: "121.121.121.121",
          serialNumber: "3",
        },
      ],
      findIpTable: [],
    };
  },
  created() {
    this.findIpTable = [
      {
        title: "序号",
        dataIndex: "serialNumber",
        align: "center",
        width: "10%",
        key: "serialNumber",
        customCell: this.renderBackground,
        customRender(_, row) {
          return {
            children: row.serialNumber,
            attrs: {
              rowSpan: row.serialNumberRowSpan,
            },
          };
        },
      },
      {
        title: "系统名称",
        dataIndex: "systemName",
        key: "systemName",
        width: "25%",
        customCell: this.renderBackground,
        customRender(_, row) {
          return {
            children: row.systemName,
            attrs: {
              rowSpan: row.systemNameRowSpan,
            },
          };
        },
      },
      {
        title: "IP地址",
        dataIndex: "ipAddress",
        key: "ipAddress",
        width: "65%",
        scopedSlots: { customRender: "ipAddress" },
      },
    ];
    this.rowSpan("systemName");
    this.rowSpan("serialNumber");
    this.whetheToSpare();
  },
  methods: {
    //设置表格隔行变色
    customRow(record, index) {
      return {
        style: {
          // 字体颜色
          color: record.remarkDesc ? record.remarkDesc.fontColor : "#ffffff",
          // 行背景色
          "background-color":
            index % 2 == 0
              ? "rgba(255, 255, 255, 0)"
              : "rgba(99, 157, 209, 0.1)",
        },
      };
    },
    //设置表格列背景颜色
    renderBackground(record) {
      return {
        style: {
          "background-color": "#1D4A84",
        },
      };
    },
    //设置表格合并列
    rowSpan(key) {
      let arr = this.findIpTableData
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key]);
          }
          return result;
        }, [])
        .reduce((result, keys) => {
          const children = this.findIpTableData.filter(
            (item) => item[key] === keys
          );
          result = result.concat(
            children.map((item, index) => ({
              ...item,
              [`${key}RowSpan`]: index === 0 ? children.length : 0,
            }))
          );
          return result;
        }, []);
      this.findIpTableData = arr;
      console.log(this.findIpTableData);
    },
    //表格里面区分ip是否备用
    whetheToSpare() {
      let arr1 = this.findIpTableData;
      let arr2 = [];
      for (let i = 0; i < arr1.length; i++) {
        const element = arr1[i].systemName;
        if (arr2.indexOf(element) < 0) {
          arr2.push(element);
        } else {
          arr1[i].ipAddress = arr1[i].ipAddress + " " + "（ 备用IP ）";
        }
      }
    },
  },
};
</script>

调接口之后，数据显示不出来，把created()的中的方法放到获取到的数据的下面，就可以正常显示了

表格的表头和下面内容对不齐问题处理

在style内放入以下样式 即可解决

<style lang="less" scoped>

  /deep/.ant-table-bordered .ant-table-tbody > tr > td {
    border-bottom: 1px solid #f0f0f0;
  }
  /deep/.ant-table-thead > tr > th {
    border-bottom: 1px solid #f0f0f0;
  }
	/deep/.ant-table-bordered.ant-table-fixed-header .ant-table-header > table{
		padding-right: 6px;
	}
	/deep/.ant-table-fixed-header .ant-table-scroll .ant-table-header{
		margin-bottom: 0px !important;
	}


  /deep/.ant-table-fixed-header
    .ant-table-scroll
    .ant-table-header::-webkit-scrollbar {
    display: none !important;
  }

</style>