角色必填校验

src/views/system/user/UserAssignRoleForm.vue

@@ -1,13 +1,13 @@
 <template>
   <Dialog v-model="dialogVisible" title="分配角色">
-    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="80px">
       <el-form-item label="用户名称">
         <el-input v-model="formData.username" :disabled="true" />
       </el-form-item>
       <el-form-item label="用户昵称">
         <el-input v-model="formData.nickname" :disabled="true" />
       </el-form-item>
-      <el-form-item label="角色">
+      <el-form-item label="角色" prop="roleIds">
         <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
           <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
@@ -37,6 +37,9 @@ const formData = ref({
   username: '',
   roleIds: []
 })
+const formRules = reactive({
+  roleIds: [{ required: true, message:'请选择角色', trigger: 'change' }]
+})
 const formRef = ref() // 表单 Ref
 const roleList = ref([]) // 角色的列表