zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    TestNG
    K近邻算法
    Python解决乱码问题
    Log4J 配置
    多线程死锁
    hadooplzo安装出错的解决方法
    B树
    设计模式
    整数序列化
    Maven
  • 原文地址:https://www.cnblogs.com/ylh188/p/15214065.html
Copyright © 2011-2022 走看看