在Element中一个输入框对应一条校验规则,如果有多条相同类型的输入框想共用一条校验规则,如何实现呢?以下是代码实现(官网其实有介绍):
代码语言:javascript复制<template>
<div>
<div class="book-input" v-for="(item,index) in current_list" :key="index">
<!-- prop的写法很重点 -->
<el-form-item :prop="'current_list.' index '.day'" :rules="rules.day">
<el-input v-model="item.day"></el-input>
</el-form-item>
<!-- prop的写法很重点 -->
<el-form-item :prop="'current_list.' index '.percent'" :rules="rules.percent">
<el-input v-model="item.percent"></el-input>
</el-form-item>
</div>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
// 模拟数据
current_list:[
{day:10,percent:20},
{day:30,percent:25},
{day:60,percent:40}
],
rules:{
// 三条数据共用的校验规则
day:[
{ required: true, message: '时间阶段不能为空', trigger: 'blur'},
],
percent:[
{ required: true, message: '分成比例不能为空', trigger: 'blur'},
]
}
}
},
};
</script>