elementUI表达自定义校验,校验在v-for中

注意:本帖为公开技术贴,不得用做任何商业用途

html 复制代码
<el-form :inline="true" :rules="rules" :model="formData" ref="formRef" class="mt-[20px]">
        <el-form-item label="选择区域" prop="area">
          <el-select v-model="formData.area" placeholder="请选择" @change="areaChange">
            <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-row v-for="(item, index) in formData.content" :key="index" class="my-[20px]">
          <div>
            <div class="mb-[10px]">{{ item.name }}:</div>
            <div
              class="border w-[400px] p-[10px] min-h-[45px]"
              style="border-radius: 5px; white-space: normal; word-break: break-all; border-color: #47536b"
              text="[14px]"
              @click="choiceSensor(item.name, item.ids)"
            >
              {{ item.ids ? item.ids : "点击选择传感器" }}
            </div>
          </div>
          <div class="ml-[10px] flex items-center">
            <el-form-item
              label="取值方式"
              :prop="`content[${index}].valueWay`"
              style="margin-bottom: 0; margin-top: 20px"
              :rules="[{ required: true, message: '请选择', trigger: 'blur' }]"
            >
              <el-select v-model="item.valueWay" placeholder="请选择">
                <el-option v-for="item in valueWayList" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="环境阈值"
              :prop="`content[${index}].threshold`"
              style="margin-bottom: 0; margin-top: 20px"
              :rules="[
                { required: true, message: '请输入环境阈值', trigger: 'blur' },
                { pattern: rule0_1, message: '请输入大于等于1的1位小数', trigger: 'blur' },
              ]"
            >
              <el-input v-model="item.threshold" placeholder="环境阈值" />
            </el-form-item>
            <el-form-item
              label="浮动值"
              :prop="`content[${index}].floating`"
              style="margin-bottom: 0; margin-top: 20px"
              :rules="[
                { required: true, message: '请输入环境阈值', trigger: 'blur' },
                { pattern: rule0_1, message: '请输入大于等于1的1位小数', trigger: 'blur' },
              ]"
            >
              <el-input v-model="item.floating" placeholder="浮动值" />
            </el-form-item>
          </div>
        </el-row>
      </el-form>

这里ts/js部分

javascript 复制代码
const formRef = ref();
// 保留大于等于0的1位小数
export const rule0_1 = /^(0|[1-9]\d*)(\.\d)?$/
const formData = ref<any>({
  area: "",
  content: [
    { name: "温度", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // 温度
    { name: "湿度", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // 湿度
    { name: "co", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // co
    { name: "co2", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // co2
    { name: "照度", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // 照度
    { name: "PM2.5", ids: "", valueWay: "", threshold: "", floating: "", rule: rule0_1 }, // PM2.5
  ],
});

其中取值方式,环境阈值,浮动值,均在循环中完成,自定义的的表单校验,同类型同一种校验

相关推荐
北海-cherish6 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909067 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist8 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师8 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang8 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。8 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。8 小时前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
Rysxt_8 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含8 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端8 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack