element ui判斷是否必填添加校驗

<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>