当前位置: 首页 > article >正文

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

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

<el-form
  ref="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-select
        v-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-select
        v-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里面的值。


http://www.kler.cn/news/293858.html

相关文章:

  • git 学习的流水log
  • 如何在 Vue 项目中缓存字体文件以提高性能
  • 企业如何组建安全稳定的跨国通信网络?
  • apt怎样快速卸载Redis服务(怎么卸载redis)
  • C++学习笔记----6、内存管理(四)---- 通常的内存陷阱(1)
  • 使用Popup实现多样化气泡弹窗在HarmonyOS中的应用
  • Cortex-M3架构学习:存储器系统
  • vue3整合antv x6实现图编辑器快速入门
  • iOS 18beta/正式版升级办法分享
  • 《中国全屋智能行业发展现状与投资前景研究分析报告》
  • element-ui打包之后图标不显示,woff、ttf加载404
  • 手机如何切换网络IP地址:‌方法详解与操作指南‌
  • Github 2024-09-04 C开源项目日报 Top10
  • [pytorch] --- 神经网络的基本骨架-nn.Module的使用
  • 缩短单片机内的Flash的擦写时间
  • Django Admin后台从一个页面同时编辑多个模型
  • Matlab实现RPC算法
  • 遍历有向网格链路实现
  • css 动态宽度的同时高度自适应(含内容居中)
  • 线性代数基础(2)——特征值和特征向量
  • 探索 Logrus 日志框架:Go 语言的强大日志工具
  • 网络安全服务基础Windows--第15节-CA与HTTPS理论
  • ubuntu 20.04 一直卡在登录界面,即使密码正确也无法登录(失败记录)
  • 前端缓存介绍以及实现方案
  • 【杂记】裂脑人实验和语言模型幻觉
  • 深度解析:基于离线开发的数据仓库转型落地案例
  • DIAS:用于DSA序列中颅内动脉分割的数据集和基准|文献速递--基于深度学习的医学影像病灶分割
  • ICM20948 DMP代码详解(6)
  • vim常用快捷键问答之二
  • CentOS 7 上安装 NVIDIA Docker