如果html的结构如下rule.strategy里面有name,negate,value三个条件
<el-form-item prop=“rule.strategy">
<div
v-for="(item, index) in formData.rule.strategy"
:key="index + '-only'"
style="padding-left: index * 3.125rem"
>
<div style="display: flex; justify-content: space-between">
<div style="display: flex">
<el-select
class="nameInput"
v-model="item.name"
ref="valSelect"
filterable
clearable
allow-create
@change="handleGetOptionChange"
placeholder="请选择或添加"
>
<el-option
v-for="(item, index) in fieldsOptions"
:key="index"
:label="item.name"
:value="item.id"
:disabled="item.disabled"
>
</el-option>
</el-select>
<el-select
v-model="item.negate"
ref="valSelect"
clearable
filterable
placeholder="请选择"
class="relationOfNameAndValueInput interval"
>
<el-option
v-for="(item, index) in innerOptions"
:key="index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-input
class="interval"
v-model="item.value"
clearable
placeholder="请输入"
></el-input>
</div>
</div>
</div>
</el-form-item>
定义formRule如下"rule.strategy"
private formRule = {
"rule.strategy": [
{
type: "array",
required: true,
message: "请完整填写规则配置",
trigger: ["blur", "change"],
},
{
validator: this.validateStrategy,
trigger: ["blur", "change"],
},
],
};
定义validateStrategy方法为校验方法
function validateWaZuhStrategy(rule, val, callback) {
const isValid = val.every((item) => {
return item.name && [true, false].includes(item.negate) && item.value;
});
if (isValid) {
callback(); // 校验通过
} else {
callback(new Error('请完整填写规则配置')); // 校验不通过,返回错误信息
}
}Ï