elementUI两个select单选框联动

实现需求:两个单选框内容两栋,在选择第一个时,第二个选框能自动更新对应选项。且在切换第一个选项内容时,第二个选框会被清空且切换到新的对应选项。

设置值班班次和备班情况两个选项 ,完整代码如下:

<template>
  <div class="content-box">
      <div class="container">
          <el-select v-model="leftValue" placeholder="请选择" @change="handleLeftChange">
              <!-- <el-option v-if="leftOptions.length !== 0" label="全选" value="all"></el-option> -->
              <el-option v-for="item in leftOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>

          <el-select
              style="margin-left: 20px"
              @change="handleRightChange"
              v-model="rightValue"
              disabled
              placeholder="请选择"
          >
              <el-option
                  v-for="item in leftOptions"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                  :disabled="rightDisabledOptions.includes(item.value)"
              ></el-option>
          </el-select>
      </div>
  </div>
</template>

<script>
export default {
  data() {
      return {
          leftValue: [],
          rightValue: [],
          leftOptions: [
              { value: '1', label: '白班', name: '否', id: 1 },
              { value: '2', label: '夜班', name: '否', id: 2 },
              { value: '3', label: '备班', name: '是', id: 3 },
              { value: '4', label: '全班', name: '否', id: 4 },
              { value: '5', label: '休班', name: '否', id: 5}
          ],
          rightDisabledOptions: [],
          selectData: [],
          updSelect: [] //为了不影响原始数据,不然原始数据勾选几次值全改变了
      };
  },
  mounted() {},
  methods: {
      handleLeftChange(value) {
          // 清空右边下拉框的选中值和禁用选项
          this.rightValue = [];
          this.rightDisabledOptions = [];
          this.selectData = [];

          // 根据左边下拉框的选中值更新右边下拉框的选中值和禁用选项
          // 左右结构一定要有一样的值,不然联动不了
          // 如果是全选,就让所有的select被选中
          if (value.includes('all')) {
              this.leftValue = this.leftOptions.map((option) => option.value);
              this.rightValue = this.leftOptions.map((option) => option.name);
              this.selectData = this.leftOptions;
          } else {
              this.leftOptions.forEach((option) => {
                  // 如果左侧选中的包含右侧的value值
                  if (this.leftValue.includes(option.value)) {
                      this.rightValue.push(option.name);// 把option.id改为option.name,显示出来的才是是否
                      this.selectData.push(option);
                  } else {
                      this.rightDisabledOptions.push(option.value);
                  }
              });
          }

          this.updSelect = JSON.parse(JSON.stringify(this.selectData));
      },
      // 右侧选择
      handleRightChange(value) {
        //将selectData值深拷贝给UpdSelect
          this.updSelect = JSON.parse(JSON.stringify(this.selectData));
          this.updSelect.forEach((item) => {
              if (!value.includes(item.id)) {
                  item.id = -1;
                  item.name = '';
              }
          });
          console.log(this.updSelect, '解决');
      }
  }
};
</script>

<style lang="scss" scoped></style>

由于第二个选框是和第一选框值同步的,第一个框有五个值,第二个框就也要五个选项,即使是重复的值。为了看起来没那么杂乱,我就把第二个选框禁用了(反正值能自己更新)

学习参考来源:俩个el-select的联动选择_el-select 联动-CSDN博客

相关推荐
一条晒干的咸魚2 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷13 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd79417 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You25 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生37 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410939 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端