ant-design vue中表格自定义表头为+号按钮

您可以使用 `customHeaderRow` 属性来自定义 Ant Design Vue 表格的表头，然后在自定义表头中添加一个“+”按钮。

以下是一个示例代码：

<template>
  <a-table
    :columns="columns"
    :data-source="tableData"
    :custom-header-row="renderHeader"
  ></a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "Name",
          dataIndex: "name",
          key: "name"
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age"
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address"
        }
      ],
      tableData: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park"
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park"
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park"
        }
      ]
    };
  },
  methods: {
    renderHeader(columns, i) {
      const customHeader = {
        children: "+",
        attrs: {
          colSpan: 1,
          rowSpan: 1,
          class: "custom-header",
          title: "Add column"
        },
        on: {
          click: event => {
            console.log("Add column clicked!");
          }
      };

      if (i === 0) {
        columns.unshift(customHeader);
      } else if (i === columns.length - 1) {
        columns.push(customHeader);
      }
      return columns;
    }
  }
};
</script>

<style>
.custom-header {
  cursor: pointer;
  color: #1890ff;
  font-weight: bold;
}
</style>

在上面的示例代码中，我们使用 `customHeaderRow` 属性来调用 `renderHeader` 方法来自定义表头。在 `renderHeader` 方法中，我们首先创建了一个包含“+”字符的自定义表头对象，并为其设置了一些属性和事件。然后，我们根据自定义表头的位置将其添加到表头列的开头或结尾，并返回更新后的列数组。

最后，我们使用 CSS 将自定义表头的样式设置为粗体和蓝色，并将鼠标光标设置为指针。