elementui 切换下拉框值,改变验证规则prop的表单项是否为必填项

需求: 当处理操作是否为忽略,如果是忽略回复内容就是非必填项,也不用校验,如果是回复的话需要填写回复的内容,可以将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>
posted @ 2021-09-01 12:00  小基狠努力啊  阅读(532)  评论(0编辑  收藏  举报