表单校验问题记录

表格嵌套表单的输入校验

1. 当表格表单在父组件时：

<el-form
  ref="FormRef"
  :rules="FormRules"
  :model="formData"
>
  <el-form-item
   label="port"
   prop="service_ports"
  >
   <el-table
    :data="formData.service_ports"
   >
    <el-table-column
     label="port"
     show-overflow-tooltip
    >
     <template #default="scope">
      <el-form-item
       :prop="`service_ports[${scope.$index}].port`"
       :rules="FormRules.port"
      >
       <el-input
        v-model="formData.service_ports[scope.$index].port"
        clearable
       ></el-input>
      </el-form-item>
     </template>
    </el-table-column>
    <el-table-column
     label="操作"
     width="180"
    >
     <template #default="scope">
      <el-button
       type="text"
       size="mini"
       @click="deletePort(scope.$index)"
      >
       删除
      </el-button>
     </template>
    </el-table-column>
   </el-table>
   <el-button
    @click="addPortRow"
   >
    <el-icon><Plus /></el-icon>添加{{ formData.service_ports.length >= 5 ? '(已达上限)' : '' }}
   </el-button>
  </el-form-item>
</el-form>

2. 当表格表单在子组件时

//这样校验还是在父组件里触发
//父组件
<el-form ref="formData1" :model="form"  :rules="rules">
    <el-form-item label="port" prop="portsConfigRows">
      <portConfigTable ref="portConfigTableRef" :port-config-table-data="form.portsConfigRows"></portConfigTable>
    </el-form-item>
</el-form>
//子组件
<el-table
  :data="portConfigTableData"
>
  <el-table-column
   prop="services_service_ports_port"
   label="port"
  >
   <template #default="scope">
    <el-form-item
     :prop="`portsConfigRows.${scope.$index}.services_service_ports_port`"
     :rules="rules.port"
    >
     <el-input
      v-model="scope.row.services_service_ports_port"
     >
     </el-input>
    </el-form-item>
   </template>
  </el-table-column>
  <el-table-column label="操作">
   <template #default="scope">
    <el-button
     @click="handleDelete(scope.$index)"
          :disabled="portConfigTableData.length === 1"
     >删除</el-button
    >
   </template>
  </el-table-column>
</el-table>

表格单选操作、回显、选择校验

//父组件
<el-form-item label="image" prop="selectedImage"/>
<el-tabs
    v-model="form.imageType"
>
  <el-tab-pane label="privateImage" name="first" disabled>
  </el-tab-pane>
  <el-tab-pane label="ImageCentor" name="second">
    <image-center-table ref="ImageCenterTableRef" :selectedImage="form.selectedImage"
                         @image-selected="handleImageSelected"
    ></image-center-table>
  </el-tab-pane>
</el-tabs>

const handleImageSelected = (selectedImage) => {
  console.log("父组件selectedImage", selectedImage);
  form.selectedImage = selectedImage;
  formData.value.validateField('selectedImage');
}
//子组件
<el-table
          :data="state.dataList"
          @sort-change="sortChangeHandle"
          @row-click="handleRadioChange"
      >
        <el-table-column
            width="100"
        >
          <template #default="scope">
              <el-radio
                  v-model="selectedRowId"
                  :value="scope.row.id" //这里不能绑定对象，只能绑定id
                  >
              </el-radio>
            </template>
        </el-table-column>
        <el-table-column
            prop="artifact_name"
            label="名称"
        />
        <el-table-column
            prop="tag"
            label="版本"

        />
      </el-table>
      <pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          v-bind="state.pagination"
      />
    </div>
  </div>
</template>

<script setup lang="ts" name="systemDemo">
import { BasicTableProps, useTable } from '/@/hooks/table';
import {getImageList, getImageList1} from "/@/api/workload/deployment";
import {ref} from "vue";

// 定义变量内容
const queryRef = ref();
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    project:'bks-public',
    pageSize:10,
    pageNum:1,
    search:""
  },
  pageList: getImageList1,
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state);

const props = defineProps({
  selectedImage: {
    type: Object,
    default: null
  }
});

const selectedRowId = ref(props.selectedImage?.id || ''); // 新增用于存储选中项
// 处理单选按钮变化
const handleRadioChange = (row) => {
  console.log('子组件Selected row:', row);
  selectedRowId.value = row.id;
  emit('image-selected', row); // 发送自定义事件给父组件
};
// 定义 emit
const emit = defineEmits(['image-selected']);