【elementUI】form表单rules没生效

芳草萋萋鹦鹉洲哦2025-12-18 9:42

关键原则是：中的 prop 值必须与验证规则对象中的键名完全一致 。对于嵌套属性如 info.modelId，需要在两个地方都指定完整的路径。

javascript 复制代码

<template>
  <el-form :model="editForm" ref="editRef" :rules="editFormRules">
    <el-form-item prop="sceneId" :label="t('setting.scene')">
      <el-select
        v-model="editForm.sceneId"
        :placeholder="t('common.placeholderSelect')"
        @change="handleSceneChange"
      >
        <el-option
          v-for="item in appStore.envLists"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        />
      </el-select>
    </el-form-item>

    <el-form-item prop="info.modelId" :label="t('scene.menu.file')">
      <el-select v-model="editForm.info.modelId" :placeholder="t('common.placeholderSelect')">
        <el-option
          v-for="item in modelOptions"
          :key="item.modelId"
          :label="item.modelName"
          :value="item.modelId"
        />
      </el-select>
    </el-form-item>

    <el-form-item prop="type" :label="t('common.type')">
      <el-select v-model="editForm.type" :placeholder="t('common.placeholderSelect')">
        <el-option
          v-for="type in robotTypes"
          :key="type.value"
          :label="type.label"
          :value="type.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item prop="info.sn" :label="t('robot.robot_no')">
      <el-input v-model="editForm.info.sn" />
    </el-form-item>

    <el-form-item prop="info.name" :label="t('robot.robot_name')">
      <el-input v-model="editForm.info.name" />
    </el-form-item>

    <el-form-item>
      <el-button @click="handleCancle">{{ t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submitForm">
        {{ t('common.save') }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="jsx">
const editForm = ref({
  sceneId: undefined,
  type: undefined,
  info: {
    sn: undefined,
    name: undefined,
    modelId: undefined,
  },
});
// 模型选择框
const modelOptions = ref([]);
let robotTypes = dictStore.ROBOT_TYPES;

const editFormRules = ref({
  'sceneId': [{ required: true, message: t('rules.isRequired'), trigger: 'change' }],
  'info.modelId': [{ required: true, message: t('rules.isRequired'), trigger: 'change' }],
  type: [{ required: true, message: t('rules.isRequired'), trigger: 'change' }],
    'info.sn': [{ required: true, message: t('rules.isRequired'), trigger: 'blur' }],
});

const editRef = ref(null);