element ui判断是否必填添加校验

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

<template>   <div>     <div class="app">       <!-- 应用测滑表单 -->       <transition name="fade">         <div class="slide-set-wrap" v-if="appFormVisible" style="width: 470px;">           <div class="slide-set-header"><span v-text="appDrawerTitle"></span><i @click="cancelEven"></i></div>           <div class="slide-set-body" style="overflow-x: hidden;width: 100%;">             <el-form :model="appForm" :rules="appFormRules" ref="appForm" label-width="140px">                              <!-- //根据是否非在编判断添加是否非必填-->               <el-form-item label="是否非在编可见" prop="nonediting">                 <el-radio-group class="range-radio-group open-type" v-model="appForm.nonediting" @change="isShowInfo" :disabled="chooseApp">                   <el-radio label="1" style="margin-top: 12px;">是</el-radio>                   <el-radio label="2" style="margin-left: 20px;margin-top: 5px">否</el-radio>                 </el-radio-group>               </el-form-item>               <el-form-item label="人员类别" prop="personnelCategory" :required="isHaveNo">               <el-select v-model="appForm.personnelCategory" multiple placeholder="请选择" style="width:100%" :disabled="ChoiceE">               <!--循环数组暂时还没有发生效果-->                 <el-option                   v-for="item in appForm.findListData"                   :key="item.dictKey"                   :label="item.dictValue"                   :value="item.dictKey">                 </el-option>               </el-select>               </el-form-item>             </el-form>           </div>           <div class="line"></div>           <div class="slide-set-footer" style="width: 410px;">             <button @click="addOrEditAppEven">确定</button>             <button @click="cancelEven">取消</button>           </div>         </div>       </transition>   </div> </template> <script> import { Loading } from 'element-ui'; //引用loading数据   export default {   created () {       },   mounted () {          },   components: {        },   data () {     let personnelCategoryReg = (rule, value, callback) => {       if (value.length == 0 && this.isHaveNo) {         callback(new Error('请选择可见人员类别'))       }else {         callback()       }     }     return {       isHaveTo:false, //判断是否必填       appForm: {         nonediting:'1', //是否非在编         personnelCategory:[], //人员类别               },       appFormRules: { // 添加应用规则         personnelCategory: [          { validator: personnelCategoryReg }         ],       }     }   },   methods: {     isShowInfo () { //点击是否非在编       if(this.appForm.nonediting == 2) { //否          this.ChoiceE = true //是否非在编选择是,人员类别不可选择          this.isHaveNo = false //是不必填的          this.appForm.personnelCategory = []       }else { //是   人员类别默认全选         this.ChoiceE = false //可选         this.isHaveNo = true //必填         this.appForm.personnelCategory = this.categoryArr       }     }   } } </script>