a-button class: 新增 template> -Go服务器开发

看起来你提供的是一段 Vue.js 代码，用于构建一个包含新增和编辑功能的模态框组件。以下是修复后的完整示例，注意语法和结构上的调整，以确保代码能够正常工作。

<template>
  <div>
    <a-button @click="openModal('add')">新增</a-button>
    
    <a-modal v-model:open="isModalVisible" title="新增详情">
      <template #footer>
        <a-button @click="closeModal">取消</a-button>
        <a-button class="button-light-blue" type="primary" @click="handleSubmit">确定</a-button>
      </template>

      <div class="modalForm">
        <a-form ref="formRef" :model="formModal" v-bind="modalLayout">
          <a-row>
            <a-col :span="16">
              <a-form-item label="标签名称">
                <a-input v-model:value="formModal.tagsDescription" placeholder="请输入标签名称" style="width: 300px"></a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="16">
              <a-form-item label="选择颜色">
                <a-checkbox-group v-model:value="formModal.color" style="width: 150%">
                  <a-checkbox value="1" style="font-size: 15px; color: red">红</a-checkbox>
                  <a-checkbox value="2" style="font-size: 15px; color: orange">橙</a-checkbox>
                  <a-checkbox value="3" style="font-size: 15px; color: yellow">黄</a-checkbox>
                  <a-checkbox value="4" style="font-size: 15px; color: green">绿</a-checkbox>
                  <a-checkbox value="5" style="font-size: 15px; color: cyan">青</a-checkbox>
                  <a-checkbox value="6" style "font-size: 15px; color: blue">蓝</a-checkbox>
                  <a-checkbox value "7" style= "font-size: 15px;color:violet;">紫</ a - checkbox >
                </ a - checkbox - group >
              </ a - form - item >
            </ a - col >
          </ a - row >
        </ a - form >
      </ div >
    </ a - modal >

    <!-- 表格部分 -->
    <table
      :columns='columns'
      :data-source='data'
      :scroll="{ x: columns.reduce((sum, col) => sum + (col.width || 0), 0) > 1800 ? 'max-content' : undefined }"
      :pagination="{ current: currentPage, pageSize, total, pageSizeOptions:['10', '20', '30', '40', '100'], onShowSizeChange: handlePageSizeChange, onChange: handlePageChange, showQuickJumper:true, showSizeChanger:true, showTotal:(total, range) => `显示 ${range[0]}~${range[1]}条记录，共 ${total} 条记录` }"
    >
      <!-- 表格内容 -->
      <template #bodyCell="{ column, record }">
        <!-- 操作列 -->
        {{#if column.key === 'operation'}}
          <!-- 编辑按钮 -->
          <table-button @click='openModal("edit", record)'>编辑</table-button>

          <!-- 删除按钮 -->
          <table-button>
            <<a-popconfirm title='确定删除吗?' @confirm='deleteBtn(record)' okText='确定' cancelText='取消'>
              删除
            </ a-popconfirm >
          </ table-button >
        {{/if}}
      </template>

    </table>

<script setup>
// 定义响应式数据
import { ref } from 'vue';

const isModalVisible = ref(false);
const modalType = ref('add');
const editingRecord = ref({});
const formModal = ref({
   tagsDescription:'',
   color:[]
});

// 方法定义
const openModal = (type, record) => {
   modalType.value = type;
   if (type === 'edit' && record) {
       editingRecord.value = record;
       // 在这里获取并设置具体的记录信息...
   } else {
       // 重置表单状态以用于新增
       formModal.value = { tagsDescription:'', color:{} };
   }
   isModalVisible.value = true;
}

const closeModal = () => {
   isModalVisible.value = false;
}

const handleSubmit = async () => {
   try {
       const values = await formRef.value.validateFields();
       Modal.confirm({
           title:'确认保存更改？',
           content:``,
           onOk(){
               if(modalType.value === 'add'){
                   addCustomer(values);
               } else if(modalType.value === 'edit'){
                   editCustomer(editingRecord.value, values);
               }
           },
           onCancel(){}
       });
   } catch (info) {
       console.log('Validate Failed:', info);
   }
}

// 新增、编辑操作的逻辑实现...
const addCustomer = (values) => {
   console.log('Add Customer:', values);
};

const editCustomer = (record, values) => {
   console.log('Edit Customer:', { ...record, ...values });
};

// 请继续完善其他方法和响应式数据...
// e.g. 分页处理、删除处理等

</script>