el-from表单动态新增,el-select主级选择完之后次级就不能再次选择同样的选项

最新推荐文章于 2024-05-14 17:00:11 发布
最新推荐文章于 2024-05-14 17:00:11 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： js vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anny_mei/article/details/121762590
版权
vue 同时被 2 个专栏收录
56 篇文章 0 订阅
订阅专栏
js
27 篇文章 0 订阅
订阅专栏

需求描述:
主闸站的闸站选择和次闸站的闸站选择下拉框是同一个接口,但是要求是主闸站选择完一个选项之后,次闸站不可以再选择了,然后次次闸站也不可以选择上面两个已经选择过的

效果图
在这里插入图片描述

接口数据结构
在这里插入图片描述
因为我这个表单是动态新增的,所以直接代码部分全部展示出来算了

在这里用到了Object.freeze(),具体用法及介绍
https://juejin.cn/post/6844903922469961741

<template>
  <el-dialog
    v-bind="dialogConfig"
    :visible.sync="visibleTmpl"
    :before-close="beforeClose"
    :title="rulesProps.title"
    append-to-body
    width="700px"
    class="index_station_addDialog"
  >
    <el-form
      :model="form"
      :label-position="'left'"
      label-width="120px"
      size="small"
      ref="addForm"
    >
      <el-form-item
        prop="name"
        label="方案名称:"
        class="pa_l"
        :rules="[
          {
            required: true,
            message: '方案名称不能为空',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          v-model="form.name"
          placeholder="请输入方案名称"
          :disabled="!rulesProps.detailView"
          maxlength="30"
          type="text"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        prop="description"
        label="关联说明:"
        class="pa_l"
        :rules="[
          {
            required: true,
            message: '关联说明不能为空',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          type="textarea"
          placeholder="请输入关联说明"
          v-model="form.description"
          maxlength="999"
          show-word-limit
          :disabled="!rulesProps.detailView"
        />
      </el-form-item>
      <!-- 主闸站 -->
      <el-row class="main_station">
        <el-col :span="24">
          <div class="title">主闸站</div>
          <el-form-item
            prop="stationId"
            label="闸站选择: "
            :rules="[
              {
                required: true,
                message: '闸站不能为空',
                trigger: 'change',
              },
            ]"
          >
            <el-select
              v-model="form.stationId"
              filterable
              :disabled="!rulesProps.detailView"
              placeholder="请选择闸站"
              @change="hanheStationChange"
            >
              <el-option
                v-for="item in options.mainOptions"
                :key="item.nodeId"
                :label="item.nodeName"
                :value="item.nodeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="onOrOff"
            label="闸站启闭控制: "
            :rules="[
              {
                required: true,
                message: '请选择闸站启闭控制',
                trigger: 'change',
              },
            ]"
          >
            <el-radio
              v-model="form.onOrOff"
              :label="1"
              :disabled="!rulesProps.detailView"
              >开</el-radio
            >
            <el-radio
              v-model="form.onOrOff"
              :label="0"
              :disabled="!rulesProps.detailView"
              >关</el-radio
            >
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 次闸站 -->
      <el-row
        v-for="(item, index) in form.gssList"
        :key="index"
        class="main_station"
      >
        <el-col :span="24">
          <div class="title">
            次闸站
            <span
              class="del"
              v-if="form.gssList.length > 1"
              @click="deleteSubjectBtn(item, index)"
              >x</span
            >
          </div>
          <el-form-item
            label="闸站选择 :"
            :prop="'gssList.' + index + '.stationId'"
            :rules="[
              {
                required: true,
                message: '闸站不能为空',
                trigger: 'change',
              },
            ]"
          >
            <el-select
              v-model="item.stationId"
              filterable
              :disabled="!rulesProps.detailView"
              placeholder="请选择闸站"
              @change="changeHandle"
            >
              <el-option
                v-for="val in options.secondaryOptions"
                :key="val.nodeId"
                :label="val.nodeName"
                :value="val.nodeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="闸站启闭控制 :"
            :prop="'gssList.' + index + '.onOrOff'"
            :rules="[
              {
                required: true,
                message: '请选择闸站启闭控制',
                trigger: 'change',
              },
            ]"
          >
            <el-radio
              v-model="item.onOrOff"
              :label="1"
              :disabled="!rulesProps.detailView"
              >开</el-radio
            >
            <el-radio
              v-model="item.onOrOff"
              :label="0"
              :disabled="!rulesProps.detailView"
              >关</el-radio
            >
          </el-form-item>
          <el-form-item
            label="是否反向关联控制 :"
            :prop="'gssList.' + index + '.isReverseControl'"
            class="float_r"
          >
            <el-switch
              v-model="item.isReverseControl"
              :active-value="0"
              :inactive-value="1"
              active-color="#dcdfe6"
              inactive-color="#34b28a"
              :disabled="!rulesProps.detailView"
            >
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="rulesProps.detailView && !isView">
        <el-button type="primary" size="small" @click="addList"
          >新增次级关联</el-button
        >
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer" v-if="rulesProps.detailView">
      <el-button @click="handleBack">取 消</el-button>
      <el-button type="primary" @click="onSubmit">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addStationList, queryWaterGateList } from "@/api/basic/getStation";

export default {
  data() {
    return {
      // 弹窗显示/隐藏
      visibleTmpl: this.visible,
      form: this.initFormData(),
      isView: false,
      defaultOption: Object.freeze([]),
      options: {
        mainOptions: [], // 主级闸坝
        secondaryOptions: [], // 次级闸坝
      },

      dialogTitle: "",
      list: [],
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dialogProps: {
      type: Object,
      default: () => {},
    },
    rulesProps: {
      type: Object,
      default: () => {},
    },
  },
  created() {
    this.queryWaterGateList();
    if (this.rulesProps.id) {
      this.form = this.dialogProps;
      // Object.assign({}, this.form, this.dialogProps);
    }
  },
  methods: {
    // 初始化表单
    initFormData() {
      return {
        name: "", // 方案名称
        description: "", // 关联说明
        stationId: "", // 闸站选择
        onOrOff: 1, // 闸站启闭控制

        gssList: [
          {
            isReverseControl: 1, //是否反向控制
            stationId: "", // 闸站选择
            onOrOff: 1, // 闸站启闭控制
          },
        ], // 次闸站
      };
    },
    // 获取闸站下拉数组
    queryWaterGateList() {
      setTimeout(async () => {
        try {
          const res = await queryWaterGateList();
          this.options.mainOptions = res.data || [];
          this.options.secondaryOptions = res.data || [];
        } catch (error) {
          console.log(error);
        }
      }, 1000);
    },

    // 新增次级关联
    addList() {
      this.form.gssList.push({
        isReverseControl: 1, //是否反向控制
        stationId: "", // 闸站选择
        onOrOff: "", // 闸站启闭控制
      });
    },
    // 删除次级关联
    deleteSubjectBtn(item, subIndex) {
      this.form.gssList.splice(subIndex, 1);
    },
    // 关闭弹窗
    beforeClose(done) {
      this.$emit("update:visible", false);
      this.$emit("submit");
      done();
      this.$refs["addForm"].resetFields();
      this.form.name = "";
      this.form.description = "";
      this.form.stationId = "";
      this.form.onOrOff = 1;
      this.form.gssList = [];
    },
    handleBack() {
      this.$emit("update:visible", false);
    },
    // 提交表单
    onSubmit() {
      this.$refs["addForm"].validate(async (valid) => {
        if (valid) {
          try {
            const res = await addStationList(this.form);
            console.log(res, 22222);

            this.$message({
              message: "新增调度方案成功",
              type: "success",
            });
            this.$emit("submit");
            this.$emit("update:visible", false);
          } catch (error) {
            console.log(error);
            this.$emit("submit");
            this.$emit("update:visible", false);
          }
        }
      });
    },
    // 主级闸坝选择
    hanheStationChange(data) {
      this.options.secondaryOptions = this.options.mainOptions.filter((val) => {
        return ![data].includes(val.nodeId);
      });
      this.defaultOption = Object.freeze(this.options.secondaryOptions);
    },
    // 次闸站下拉数据数组
    changeHandle(value) {
      this.options.secondaryOptions = this.defaultOption.filter(
        (item) => !this.form.gssList.some((_) => _.stationId === item.nodeId)
      );
      if (this.options.secondaryOptions.length < 1) {
        this.isView = true;
      }
    },
  },

  computed: {
    dialogConfig() {
      return Object.assign({}, this.dialogProps);
    },
  },
  watch: {
    visible(n) {
      this.visibleTmpl = n;
    },
  },
};
</script>

<style lang="scss" >
.index_station_addDialog {
  .title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #606266;
    .del {
      float: right;
      cursor: pointer;
    }
  }
  .main_station {
    border: 1px solid #dcdfe6;
    padding: 8px 16px 0 16px;
    margin-bottom: 16px;
    .el-form-item {
      margin-left: 16px;
    }
  }
  .pa_l {
    .el-form-item__label {
      padding-left: 20px;
    }
  }
  .float_r {
    float: right;
    width: 180px !important;

    .el-form-item__label {
      width: 140px !important;
    }
  }
  .el-select {
    width: 100%;
  }
  .el-textarea__inner {
    font-family: "微软雅黑";
  }
}
</style>
神探小白牙
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ARINC-429协议规范.zip
07-19
3. **传输级别**：ARINC-429协议定义了两种传输级别——主级（Primary）和次级（Secondary）。主级用于传输关键和紧急信息，而次级则用于非关键数据。 4. **数据类型**：协议支持多种数据类型，如浮点数、整数、...
程序员考试刷题-software-testing:为大学课程和个人兴趣试验和研究软件测试
07-07
秒就在其处女航中爆炸。 64 位浮点数的值太大而无法转换为 16 位有符号整数。 Intertial Reference System 接收到错误的数据，导致火箭翻转了 90 度。 空气动力在 4 公里的高度将助推器与主级分开。 这导致自毁机制...
el-select已经选择的下拉框的值不可以再次被选择
Fhm123456_的博客
03-20 3593
需求：每次点新增按钮，列表typeList就会新增一条可以选择的下拉菜单，如果一个下拉菜单绑定了一个a，那么新增之后的下拉菜单里面的下拉选项a是属于被禁用的状态，只能选择别的未被禁用的选项 实现： 1，首先把下拉菜单的options拿到，，把里面的每一项新增一个item.disabled=false的属性，这样可以去控制下拉框是否禁用 2，刚进入页面调列表接口，拿到一进页面返回的typeList，拿到里面已经被绑定的option，把这些option放在一个数组里面，为了跟操作1的数组进行对比
el-select下拉框：数据回显后，无法重新选中或修改
爬楼梯的前端小白的博客
11-15 2624
作用：在Vue官方文档中指出，$forceUpdate具有强制刷新的作用，迫使vue实例重新（rander）渲染虚拟dom，注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。作用：vue中的nextTick()是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick()，则可以在回调中获取更新后的 DOM。给el-select 点击事件 @change="getTeacherId" 强制数据刷新。选中其他值以后 数据并没有发生改变 且无法选中。
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇_el-option v-for
最新发布
2401_85013615的博客
05-14 341
【代码】el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇_el-option v-for。
Vue 多个select 不能重复选择相同value的数据
疑问 搜索 动手 解决 记录
04-30 5423
开发过程经常会碰到多个Select同样的选项,选择后其他select不能继续选择,整合了两种类别的需求呈现方式 第一种，不能重复选择相同value的数据，选择后其他select移出该项 前言 1.功能的实现是基于vue的计算属性computed 2.个人感觉vue的计算属性computed挺适合做这个功能的，因为通过计算属性return的值可以保证相对独立，又可以在其依赖的属性的值发生变化时进行重新计算。 3.是偶然间想到用计算属性来完成这个功能，怕自己忘了所以写在博客这里当总结，同时也希望笔者的想法能给大
element使用el-select选中的下拉框值不可以再次选中
m0_61847912的博客
07-19 475
【代码】element使用el-select选中的下拉框值不可以再次选中。
el-select 不能重复选择
NancyFyn的博客
02-27 712
el-select 不能重复选择，注意：删除后可以再次重新被选择。
网络技术-网络基础-认知无线电中频谱感知和主用户定位联合检测研究.pdf
04-19
在认知无线电网络中，频谱感知是核心功能，它使得次级用户（SU）能够检测到主级用户（PU）的活动，避免干扰其通信，同时找到可用的频谱资源。 本文针对认知无线电中的频谱感知和主用户定位进行了深入研究。首先，将...
网络技术-网络基础-认知无线电多信道联合感知算法研究与优化.pdf
04-19
认知无线电技术通过允许次级用户（Secondary User, SU）在不影响主级用户（Primary User, PU）的前提下共享频谱，提升了频谱效率。 在传统的多信道感知中，遗传算法常被用于解决非凸优化问题，但由于其固有的局限性...
蚁群-粒子群算法求解多模式资源受限项目调度问题.pdf
09-29
该算法采用层次结构，蚁群算法在主级选择任务模式，而粒子群算法在从级调度任务。通过设计蚂蚁转移概率、模式优选概率和任务优选概率，以最小化工期和均衡资源分配为目标。算法的主要参数通过对PSPLIB测试集的优化和...
for循环下拉框的值不能重复选择
swaggy_GM的博客
06-09 426
v-for="(item, index) in formData.pointSettingDtoList" <el-select v-model="item.type" placeholder="请选择" :style="{ width: '150px' }" @change="selectIdsArrSelect" clearable > <el-option v-for="(it, idx) in typeOptions" :da
element的select下拉框设定初值后，不能重新选择的问题
开心就好
07-10 7186
<el-form-item label="车辆型号:" prop="carModel"> <el-select v-model="addDerive.carModel" @change="$forceUpdate()" placeholder="请选择车辆型号"> <el-option v-for="item in carMod
vue 动态循环出的多个select 不能重复选择相同的数据（转）
qq_43526066的博客
06-19 6269
转自执着慕晚的流年 <template> <div class="program" v-for="(items,index) in parArr" :key="items.guid"> <Select v-model="parItem.id" @on-change="onChangeProgram"> <Option v-for=...
Element-Ui中el-select选择后无法选中
Alone_Endeavor的博客
04-13 3373
由于Vue会在初始化实例时对属性执行getter/setter转换过程，所以属性必须在data中存在才能让vue转换它，这样才是响应式的，在我们开发项目过程中，多数情况下回用到element-ui中的select选择器，在开发过程中，会遇到这种情况，：使用Vue.js官方提供的vm.$forceUpdate()方法，该方法作用是迫使Vue实例重新渲染。具体来说就是在首次初始化之后，vue不会在进行加载渲染了，需要我们手动去执行渲染方法去重新加载它。受javascript的限制，vue。
element-ui select 组件，下拉框无法选中和回显数据的问题
qq_36437172的博客
06-28 2490
问题描述：在使用 Vue 框架 和 element-ui 库进行开发，对于页面中回显下拉框中数据时，我们对下拉框进行切换时，出现下拉框无法选中，同时页面中选中的值也未改变。 添加 change 事件获取选中的值，使用 Vue 2.x 版本的 vm.$set 进行强制更新视图，页面中选中的值未改变。 changeGoodsInfo (value) { this.$set(this.baseForm, 'goodsInfo', value) } 解决方案：change 事件，使用this.$..
解决 el-switch 只能点击一次
Charltin的博客
05-30 728
出现问题 当我在表格里使用el-switch，每次都是点击一次后就不能点击了。 我是这么写的： <template> <el-switch v-model="value" active-color="#579ef8" inactive-color="#ccc"></el-switch> </template> data(){ return { value: true } } 然后我充满疑问对value进行了一个监听，这里我用的是 wat
elementui select选项无法选择的问题
T_ianxin的博客
06-25 1851
出现这个问题的原因是绑定了对象，数据刷新了但视图没有刷新。
elementUI el-table中多列使用el-switch切换导致的问题
heirui的专栏
08-26 3217
el-table表格中多列使用el-switch开关时的冲突解决
级联选择器多选
06-01
ID：<input type="text" name="id" value="${param.id}" readonly><br> 姓名：<input type="text" name="name" value="${param.name}"><br> 年龄：<input type="text" name="age" value="${param.age级联选择器多选可以使用多个级联选择器来实现。首先，你需要创建一个主级联选择}"><br> <input type="submit" value="修改"> </form> </body> </html> ``` 这样器，用来选择第一级选项。然后，你需要创建一个或多个次级联选择器，用来，一个基于MVC三层架构实现JavaWeb连接MySQL进行增删改查的完整代码就实现了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值