[JavaScript知识库]Ant Design Vue Table合并单元格且居中按钮

注意点：

1、在customRender中自定义合并行/列的规则；

2、rowSpan合并行，colSpan合并列，值为合并的行数/列数；当值为0时，表示不渲染；

3、内置按钮的点击事件用：οnclick={}

<template>
  <a-table :dataSource="datas" :columns="columns">
    <span slot="serialNo" slot-scope="text, record, index">{{ index + 1 }}</span>
  </a-table>
</template>
<script>
  data() {
    this.columns = [
      {
        title: '序号',
        scopedSlots: { customRender: 'serialNo' },
        width: '100px',
      },
        {
            title: '姓名',
            dataIndex: 'name',
            width: '100px',
        },
        {
            title: '班级',
            dataIndex: 'class',
            width: '100px',
        },
        {
            title: '操作',
            width: '100px',
            customRender: (text, record, index) => {
              const obj = {
                children: <a-button type="primary" onclick={ () => { this.combine(record, index); } }>成组</a-button>,
                attrs: {},
       		  }
              // 每三个为一组
              if (index % 3 === 0) {
                 // 合并三行
                 obj.attrs.rowSpan = 3;
               } else {
                 // 其余两行不渲染
                 obj.attrs.rowSpan = 0;
               }
               return obj;
             }
          },
        ]

        return {
            datas: [],
        }
    },
    methods: {
        combine(record, index) {
            // 具体的业务逻辑
        }
    }
</script>