需求: 当处理操作是否为忽略,如果是忽略回复内容就是非必填项,也不用校验,如果是回复的话需要填写回复的内容,可以将prop修改改动态的事件进行判断是否需要校验
<el-form :model="messages" :rules="node" ref="ruleForm" label-width="90px">
<el-row class="card-row" style="margin-top: 20px">
<el-form-item label="处理操作" class="is-required" prop="manage" ref="manage">
<el-select
v-model="messages.manage"
filterable
placeholder="请选择"
clearable
> <el-option
v-for="(item,index) in card"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-row>
<el-row class="card-row">
<el-col :span="24">
<el-form-item label="回复内容" style="margin-right: 20px" class="is-required" :prop="itemChange" >
<el-input type="textarea" v-model="messages.content" placeholder="请输入" maxlength="150"
:autosize="{ minRows: 5, maxRows: 5}" show-word-limit clearable
:disabled="messages.manage == '1' ">
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<script>
export default {
name: "",
data () {
return {
messages:{
manage:'',//处理操作
content:'', //回复内容
},
card:[],
node:{
'manage':[{
required: true,
message: '请选择操作',
trigger: 'change'
}],
'content':[{
required: true,
message: '请输入回复内容',
trigger: 'blur'
}],
}
}
},
computed:{
//判断处理操作是否为忽略,如果是忽略回复内容就是非必填项,也不用校验
itemChange() {
return this.messages.manage == '1' ? '' : 'content'
}
},
}
</script>