elementui 切換下拉框值,改變驗證規則prop的表單項是否為必填項
阿新 • • 發佈:2021-09-01
需求: 當處理操作是否為忽略,如果是忽略回覆內容就是非必填項,也不用校驗,如果是回覆的話需要填寫回復的內容,可以將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>