重点:
- 在
select change事件发生时触发$forceUpdate()强制更新视图 - 通过
:prop="eoaList[${index}].selectValue"来设置动态表单验证 - 通过
this.$refs.approvalForm.fields来遍历重置表单
<template>
<el-form ref="approvalForm" label-position="top" :model="{ eoaList }" class="chain-form" hide-required-asterisk>
<div v-for="(item, index) of eoaList" :key="item.chainPostId" class="chain-item">
<el-radio v-model="item.radio" label="1" class="form-radio" @change="radioChange(index)">选择岗位内用户</el-radio>
<el-form-item :prop="`eoaList[${index}].selectValue`" :rules="allRules">
<el-select
v-model="item.selectValue"
placeholder="请选择"
class="from-input"
clearable
@change="$forceUpdate()">
<el-option
v-for="seItem of item.umAccountList"
:key="seItem.umNo"
:label="seItem.name"
:value="seItem.umNo"></el-option>
</el-select>
</el-form-item>
<el-radio v-model="item.radio" label="2" class="form-radio" @change="radioChange(index)">选择其他用户</el-radio>
<el-form-item :prop="`eoaList[${index}].aliveValue`" :rules="allRules">
<el-input v-model="item.aliveValue" placeholder="请输入内容" suffix-icon="el-icon-search" />
</el-form-item>
</div>
</el-form>
</template>
<script>
export default {
data() {
this.allRules = { required: true, message: '该项为必填', trigger: 'change' }
return {
eoaList: [], // 审批链
}
},
methods: {
/**
* @description 切换 清除表单验证
*/
radioChange(index) {
const fields = this.$refs.approvalForm.fields
fields.forEach(e => {
if ([`eoaList[${index}.selectValue]`, `eoaList[${index}].aliveValue`].includes(e.prop)) {
e.resetField()
}
})
},
},
}
</script>