<a-model>最下方自定义按钮

<a-modal> 的最下面，也就是确认和取消按钮所在的行添加一个按钮。通常情况下，<a-modal> 的底部按钮会放在 footer 插槽中，你可以通过自定义 footer 插槽来实现这个功能。

以下是一个示例：

<template>
  <a-modal
    v-model:visible="visible"
    title="标题"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <!-- 模态框的内容 -->
    <p>这里是模态框的内容。</p>

    <!-- 自定义footer插槽 -->
    <template #footer>
      <!-- 额外的按钮 -->
      <a-button @click="handleExtraButton">额外按钮</a-button>
      <!-- 取消按钮 -->
      <a-button @click="handleCancel">取消</a-button>
      <!-- 确认按钮 -->
      <a-button type="primary" @click="handleOk">确认</a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    handleOk() {
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
    handleExtraButton() {
      console.log("额外按钮点击");
    }
  }
};
</script>

解释：

• #footer 插槽：用于自定义 <a-modal> 的底部内容。默认的确认和取消按钮通常位于这里。

• 自定义按钮：在 footer 插槽中，你可以添加额外的按钮，比如“额外按钮”，并为其添加相应的事件处理方法。

通过这种方式，你可以轻松地在模态框底部的确认和取消按钮行中添加一个或多个自定义按钮。