element-plus 循环生成的多个input输入框如何校验

        我们知道正常写出来的input输入框如何校验，那循环出来的输入框应该怎么校验咧，这里就教大家如何的去校验通过循环出来的输入框。

      首先先看单个的input如何做校验

<script lang="ts" setup>
import router from '../router';
import { ref, reactive } from 'vue';
 
// setInterval(() => {
//     if (window.console && window.console.log) {
//         alert
//     }
 
// }, 1000)
const ruleForm = reactive({
    ruleForm: [
        { value: "123" }, { value: "1223" }, { value: "" } //inout绑定的数据
    ]
})
const rules = reactive([
    { required: true, message: '该输入项为必填项!1', trigger: 'blur' }, //校验
    { required: true, message: '该输入项为必填项!2', trigger: 'blur' },
    { required: true, message: '该输入项为必填项!3', trigger: 'blur' },
]
)

        我们在通过循环ruleform，生成多个input输入框，代码如下

现在这种情况下，因为prop无法精准的定位到底应该绑定哪个input，所以就会出现，prop无法校验input的情况下，这时候只能是通过给prop传入相对应的下标，通过下标来区分，一个prop对比一个model，代码如下

这里要注意下，人工prop的参数传入变量时，记得在前面加上：号，变量才会生效，不管是不是用模板字符串的写法。

然后我们可以根据下标为每一个input单独设置校验规则，        

        我们给rules传入一个参数，参数接受下标，通过下标来对每一个循环出来的input设置校验规则

<script lang="ts" setup>
import router from '../router';
import { ref, reactive } from 'vue';
 
// setInterval(() => {
//     if (window.console && window.console.log) {
//         alert
//     }
 
// }, 1000)
const ruleForm = reactive({
    ruleForm: [
        { value: "123" }, { value: "1223" }, { value: "" }
    ]
})
const rules = reactive([ //校验规则数组，通过下标来确定具体绑定校验的是哪个input
    { required: true, message: '该输入项为必填项!1', trigger: 'blur' },
    { required: true, message: '该输入项为必填项!2', trigger: 'blur' },
    { required: true, message: '该输入项为必填项!3', trigger: 'blur' },
]
)
const fhs = () => {
    console.log(ruleForm)
}
script>
<style scoped>
:deep(.el-badge__content) {
    background-color: black
}
style>

效果图

拜拜！！！