[ant-design-vue]ant-design-vue的table列合并场景应用

环境

“ant-design-vue”: “^1.6.5”,
“vue”: “^2.6.12”,

table列的展示

想要实现合并两列，但是标题不需要合并的场景

方式1

{//合并两列
    dataIndex: "combin",
    align:'center',
    fixed:'left',
    scopedSlots: { 
      customRender: "combin",
      title: 'combintitle'
    },
    width: 200,
  },

.vue 表头

<template slot="combintitle">
        <div class="combintitle">
          <div>第一</div>
          <div>第二</div>
        </div>
</template>

内容

<template slot="combin">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</template>

方式2

该方式最重要的是第二列设置属性 style:‘display:none’，否则列会错位

{
    title: '',
    fixed:'left',
    children: [
      {
        title: '第一',
        dataIndex: '',
        width: 100,
        customCell: (row, rowIndex) => {
          return {
            attrs: {
              colSpan: 2,
            },
          };
        },
        scopedSlots: { 
          customRender: "combin",
        },
      },
      {
        title: '第二',
        dataIndex: '',
        width: 100,
        customCell: (row, rowIndex) => {
          return {
            attrs: {
              colSpan:0,
              style:'display:none'
            },
          };
        },
      },
    ],
  },

方式3

第二列设置属性 style:‘display:none’，否则列会错位

{//3
    title: "第一",
    dataIndex: "",
    align:'center',
    fixed:'left',
    customCell: (row, rowIndex) => {
      return {
        attrs: {
          colSpan: 2,
        },
      };
    },
    scopedSlots: { 
      customRender: "combin",
    },
    width: 100,
  },
  {
    title: "第二",
    dataIndex: "",
    align:'center',
    fixed:'left',
    customCell: (row, rowIndex) => {
      return {
        attrs: {
          colSpan: 0,
          style:'display:none'
        },
      };
    },
    width: 100,
  },