您的位置:首页 > 娱乐 > 八卦 > element-plus表单项循环的得到的。并且一个项里面有多个子项需要校验。

element-plus表单项循环的得到的。并且一个项里面有多个子项需要校验。

2024/12/23 16:29:47 来源:https://blog.csdn.net/qq_33769914/article/details/141867292  浏览:    关键词:element-plus表单项循环的得到的。并且一个项里面有多个子项需要校验。

数据内容循环得到。并且还可以自己增加减少。怎么给他写校验呢?

<el-formref="ruleFormRef":rules="rules":model="row"
>

 

<el-form-item:label="index>0?'':'资质及职称'"v-for="(item,index) in  row!.userTitleLevelList":key="index"prop="userTitleLevelList"class="userTitleLevelList"required><el-form-item :prop="`userTitleLevelList[${index}][titleCode]`" :rules="rules.titleCode"><el-selectv-model="item.titleCode"placeholder="请选择资质类别"style="width:200px"clearable><el-option :label="item1.name" :value="item1.code" v-for="item1 in qualificationsCategory" :key="item1.code">{{ item1.name }}</el-option></el-select></el-form-item><el-form-item :prop="`userTitleLevelList[${index}][titleLevelCode]`" :rules="rules.titleLevelCode"><el-selectv-model="item.titleLevelCode"placeholder="请选择职称"style="width:200px"clearable><el-option :label="item1.name" :value="item1.code" v-for="item1 in professionalTitle" :key="item1.code">{{ item1.name }}</el-option></el-select></el-form-item><el-icon color="#35BFA8" size="20" @click="deleteQualify(index)" v-if="drawerProps.row!.userTitleLevelList.length!=1"><Remove /></el-icon><el-icon color="red" size="20" @click="addQualify()" v-if="index==drawerProps.row!.userTitleLevelList.length-1"><CirclePlus/></el-icon>
</el-form-item>
const rules = reactive({titleCode:[{required: true, message: "请选择资质类别"}],titleLevelCode:[{required: true, message: "请选择职称" }],
});

const row=reactive{

       userTitleLevelList:[{titleCode: '',titleLevelCode: ''}]

}

const professionalTitle= reactive([
    {
        "code": "L001",
        "name": "初级"
    },
    {
        "code": "L002",
        "name": "中级"
    },
    {
        "code": "L003",
        "name": "副高级"
    }
])

const  qualificationsCategory=reactive([
    {
        "code": "T001",
        "name": "养老护理员"
    },
    {
        "code": "T002",
        "name": "护士"
    }
])

//添加资质
const addQualify = () => {row!.userTitleLevelList.push({titleCode: '',titleLevelCode: ''})}
//删除资质
const deleteQualify = (index) => {row!.userTitleLevelList.splice(index, 1);
}

重点已标红。注意循环的prop要写成动态的。并且prop使用的这个userTitleLevelList是form的model:row   row里面的值。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com