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

<template>
  <div>
    <div class="app">
      <!-- 应用测滑表单 -->
      <transition name="fade">
        <div class="slide-set-wrap" v-if="appFormVisible" style=" 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; 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="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=" 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>