你的代码片段似乎是一个 Vue 3 的组件，使用了 Ant Design Vue 的一些 UI 组件。这个组件包含一个用于新增和编辑信息的模态框以及表格展示。

以下是你代码的一些修正和补充，使其更加完整和规范：

<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-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 = "{
        currentPage,
        pageSize,
        totalRecords,
        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 }">
        <!-- 编辑按钮 -->
        <template v-if='column.key === "operation"'>

          <!-- 编辑操作 -->
          <
          button @click = "openModal('edit', record)" > 编辑 </ button >

          <!-- 删除操作 -->
          <
          a-popconfirm
            title = "确定删除吗?"
            @confirm = "deleteBtn(record)"
            okText = "确定"
            cancelText = "取消"
           >
           <
           a > 删除 </ a > 
           </ a - popconfirm >

         / template >

       / template >

     / table >
   / div >

完整功能说明：

1. 新增与编辑模态框：点击“新增”按钮打开模态框，里面有输入字段和颜色选择。
2. 表格展示数据：通过 data 属性绑定到表格上，以列配置的方式动态生成表格。
3. 操作按钮：
   • 每一行都可以通过“编辑”按钮进行修改，通过“删除”按钮进行删除。
4. 函数实现：
   • openModal 函数用于控制模态框的显示与编辑状态。
   • handleSubmit 函数验证并提交表单数据。

请确保在 <script setup> 部分实现对应的数据管理、API 调用等逻辑来支撑这些 UI 功能。如果你有特定的需求或者问题，请告诉我！


内容由零声教学AI助手提供，问题来源于学员提问