使用 v-for 循环动态生成 Ant Design Modal 选项卡

<a-modal :visible='visible' :confirm-loading='confirmLoading' @ok='handleOk' @cancel='handleCancel'

要将这些代码改为使用v-for循环，您可以为每个选项创建一个数据数组，并使用v-for指令迭代数组来生成动态的选项。以下是如何使用v-for重写代码：

<a-modal
  :visible='visible'
  :confirm-loading='confirmLoading'
  @ok='handleOk'
  @cancel='handleCancel'
>
  <a-tabs>
    <a-tab-pane v-for='option in options' :key='option.key' :tab='option.tab'>
      <div>
        <a-button
          v-for='button in option.buttons'
          :key='button.text'
          type='primary'
          style='margin-bottom: 10px'
        >
          {{ button.text }}
          <a-input
            placeholder='Basic usage'
            style='margin-left: 50px; width: 300px; padding-top: 10px'
          />
        </a-button>
        <br />
      </div>
    </a-tab-pane>
  </a-tabs>
</a-modal>

在上述示例中，您可以在Vue组件的data选项中定义一个名为options的数组，并包含每个选项的数据。然后，使用v-for指令迭代options数组来生成a-tab-pane和内部的按钮和输入框。

确保在Vue组件的setup方法中初始化options数组，并为每个选项提供必要的数据。

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const visible = ref(false);
    const confirmLoading = ref(false);
    const options = ref([
      {
        key: '1',
        tab: 'Tab 1',
        buttons: [
          { text: '注册邮件' },
          { text: '登录密码' },
          { text: '输验证码' },
        ],
      },
      {
        key: '2',
        tab: 'Tab 2',
        buttons: [
          { text: '注册邮件' },
          { text: '登录密码' },
          { text: '输验证码' },
        ],
      },
      {
        key: '3',
        tab: 'Tab 3',
        buttons: [
          { text: '注册邮件' },
          { text: '登录密码' },
          { text: '输验证码' },
        ],
      },
    ]);

    const handleOk = (e) => {
      console.log(e);
      visible.value = false;
    };

    const handleCancel = () => {
      visible.value = false;
    };

    return {
      visible,
      confirmLoading,
      options,
      handleOk,
      handleCancel,
    };
  },
});

在上述示例中，我添加了options数组，并为每个选项提供了相应的数据。您可以根据需求自定义选项的数量和内容。

请根据您的实际需求进行适当的调整，并在Vue组件中初始化和使用相应的数据。