ant-design中表格合并单元格并填充按钮

效果如下

代码如下

<template>
  <a-card>
    <a-table
      :columns="columns"
      :data-source="data"
      @change="changePage"
      :rowKey="(record) => { return record.seckill_goods_id;}"
      :customRow="handleClickRow"
    >
      <template
        slot="name"
        slot-scope="text"
      >
        <a>{{ text }}</a>
      </template>
    </a-table>
  </a-card>
</template>
<script>
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York No. 1 Lake Park",
  },
  {
    key: "2",
    name: "Jim Green",
    tel: "0571-22098333",
    phone: 18889898888,
    age: 42,
    address: "London No. 1 Lake Park",
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sidney No. 1 Lake Park",
  },
  {
    key: "4",
    name: "Jim Red",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park",
  },
  {
    key: "5",
    name: "Jake White",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park",
  },
];

export default {
  data() {
    const renderContent = () => {
      return (
        <div class="long-btn">
          <a-button type="primary" block vOn:click={this.seeDetail}>
            查看信息
          </a-button>
        </div>
      );
    };
    const columns = [
      {
        title: "Name",
        dataIndex: "name",
        scopedSlots: { customRender: "name" },
      },
      {
        title: "Age",
        dataIndex: "age",
        scopedSlots: { customRender: "age" },
      },
      {
        title: "Home phone",
        dataIndex: "tel",
        customRender: (value, row, index) => {
          let obj = {
            children: renderContent(index),
            attrs: { colSpan: 2 },
          };
          return obj;
        },
      },
      {
        title: "Phone",

        dataIndex: "phone",
        customRender: (value) => {
          const obj = {
            children: value,
            attrs: { colSpan: 0 },
          };
          return obj;
        },
      },
      {
        title: "Address",
        dataIndex: "address",
        scopedSlots: { customRender: "address" },
      },
    ];
    return {
      data,
      columns,
    };
  },
  methods: {
    // 换页
    changePage(e) {
      console.log("e: ", e);
    },
    //点击了按钮，如果在合并单元格中填充按钮，这个按钮无法与这一行的数据绑定，可以结合表格的行点击事件去做，但注意这一行行内的方法可能会冒泡，所以这一行的其他事件要在点击时要加上修饰符@click.native.stop
    seeDetail() {
      console.info("点击了");
    },
    // 点击了某行，
    handleClickRow(record) {
      console.log("record: ", record);
    },
  },
};
</script>