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

最新推荐文章于 2024-08-23 13:45:37 发布

爱吃羊的狗

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量147

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/130688386

版权

这段代码展示了在Vue.js中如何使用el-form-item和el-checkbox-group组件来处理用户选择。handleFlightData函数处理change事件，根据用户选择更新checkbox的禁用状态。它遍历选项列表，比较资源数量以决定是否禁用其他项。

摘要由CSDN通过智能技术生成

        <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,
          };
        });
      }
    },