Ant Design Vue： a-table 组件来创建表格，在表头中使用 slot 插槽来自定义表头的列

在 Ant Design Vue 中，可以使用 a-table 组件来创建表格，并且可以使用 expand-row 属性来自定义展开/折叠行。为了在表头中添加一个自定义的“+”按钮，可以在表头中使用 slot 插槽来自定义表头的列。

以下是一个示例代码，演示如何在 Ant Design Vue 中自定义表头为“+”按钮：

<template>  
  <a-table :columns="columns" :data-source="data" :expand-row-keys="expandRowKeys" :default-expand-all="true">  
    <template slot="name" slot-scope="scope">  
      <span v-if="!scope.row.expanded">{{ scope.row.index + 1 }}</span>  
      <span v-else>  
        <i class="anticon anticon-down" @click="toggleExpand(scope.row)"></i>  
        {{ scope.row.index + 1 }}  
      </span>  
    </template>  
    <template slot="operation" slot-scope="scope">  
      <span v-if="!scope.row.expanded">  
        <i class="anticon anticon-edit" @click="edit(scope.row)"></i>  
        <i class="anticon anticon-delete" @click="remove(scope.row)"></i>  
      </span>  
      <span v-else>  
        <i class="anticon anticon-close" @click="toggleExpand(scope.row)"></i>  
      </span>  
    </template>  
  </a-table>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      columns: [  
        {  
          title: 'Name',  
          dataIndex: 'name',  
          key: 'name',  
        },  
        {  
          title: 'Operation',  
          dataIndex: 'operation',  
          key: 'operation',  
          scopedSlots: { default: 'operation' },  
        },  
      ],  
      data: [  
        {  
          id: 1,  
          name: 'John Doe',  
          operation: 'Edit',  
        },  
        {  
          id: 2,  
          name: 'Jane Smith',  
          operation: 'Delete',  
        },  
      ],  
      expandRowKeys: [],  
    };  
  },  
  methods: {  
    toggleExpand(row) {  
      const index = this.expandRowKeys.indexOf(row.id);  
      if (index === -1) {  
        this.expandRowKeys.push(row.id);  
      } else {  
        this.expandRowKeys.splice(index, 1);  
      }  
    },  
    edit(row) {  
      alert(`Edit ${row.name}`);  
    },  
    remove(row) {  
      alert(`Delete ${row.name}`);  
    },  
  },  
};  
</script>

在这个示例代码中，我们在表头中定义了两列：姓名和操作。对于“操作”列，我们使用了 scopedSlots 来定义一个名为 operation 的插槽，用于自定义该列的内容。在插槽中，我们根据当前行的展开状态来显示不同的按钮。如果当前行未展开，则显示“Edit”和“Delete”按钮；如果当前行已展开，则显示“Close”按钮。我们还定义了一个 toggleExpand 方法来切换行的展开状态。