表单校验成功validate返回true,控制台警告信息fieldValue:“”
<el-form :model="form" :rules="rules" ref="ruleFormRef">
<el-form-item label="权限类型:" prop="type">
<el-select
v-model="form.type"
placeholder="请选择权限类型"
style="width: 180px"
@change="changeSelect"
>
<el-option label="仅浏览" value="0" />
<el-option label="浏览及下载" value="1" />
</el-select>
</el-form-item>
</el-form>
//Vue3,js
const { proxy } = getCurrentInstance(); //this
var form = reactive({
type: "0",
});
//表单校验
var rules = computed(() => ({
type: [
{
required: true,
message: "请选择权限类型",
trigger: "change",
},
],
}));
// 提交表单
const submitForm = async () => {
await proxy.$refs.ruleFormRef.validate((val) => {
if (val) {
console.log(form.type);
console.log(val);//true!!!!!!!!!!!!!!!!!!!!!!!
changeFilePermission({})
.then((res) => {
if (res.code === 200) {
//修改成功
}
})
.catch();
dialogVisible.value = false;
} else {
return false;
}
});
};
控制台报错
解决方案
el-form-item的prop需要跟el-select的v-model绑定的一致