1. 程式人生 > 其它 >elementui 切換下拉框值,改變驗證規則prop的表單項是否為必填項

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>