问答

两个select下拉框,不能选择相同的值

作者:admin 2021-04-20 我要评论

element 有两个select下拉框,下拉数据都是一模一样,需求是不能同时选择相同的值,请问如何实现,谢谢各位 template el-select v-model="value1" placeholder="...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

element 有两个select下拉框,下拉数据都是一模一样,需求是不能同时选择相同的值,请问如何实现,谢谢各位

<template>
  <el-select v-model="value1" placeholder="请选择1">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-select v-model="value2" placeholder="请选择2">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options1: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }],
        
        value1: ''
        value2: ''
        
      }
    }
  }
</script>
###

为已被选择的添加一个disabled禁用状态属性

###

使用disabled

<template>
  <el-select v-model="value1" placeholder="请选择1">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :disabled="item.value === value2"
      :value="item.value">
    </el-option>
  </el-select>
  <el-select v-model="value2" placeholder="请选择2">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :disabled="item.value === value1"
      :value="item.value">
    </el-option>
  </el-select>
</template>

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器