选择框在选择时判断可选还是不可选

        <el-form-item label="脚本" prop="scriptIds">
          <el-checkbox-group v-model="flightScriptForm.scriptIds"   @change="handleFlightData">
            <el-checkbox
              v-for="item in flightScriptOptions"
              :label="item.id"
              :key="item.id"
              :disabled="item.disabled"
              >{{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
    handleFlightData(val) {
      if (Array.isArray(val) && val.length > 0) {
        val.forEach((element) => {
          let row = this.flightScriptOptions.find((item) => item.id == element);
          this.flightScriptOptions = this.flightScriptOptions.map((item) => {
            if (row.resourcesNumber == item.resourcesNumber) {
                return {
                ...item,
                disabled:row.id != item.id ? true : false,
              };
            } else {
              return {
                ...item,
              };
            }
          });
        });
      } else {
        this.flightScriptOptions = this.flightScriptOptions.map((item) => {
          return {
            ...item,
            disabled: false,
          };
        });
      }
    },

你可能感兴趣的:(vue.js,javascript,前端)