el-select下拉选择器“多选”对选择的数量进行限制

el-select选择器在多选的时候我们希望对选择的数量进行一些限制,比如对多可以选择两个,就需要在选择大于两个的时候,让多选的数据提交不上去,并且给客户进行提示

思想:通过change事件获取下拉选择器的数据变化,并且进行判断,在数组长度大于2的时候,我们吧select双向绑定的数据进行裁剪,去掉最后一位

//bindPeople绑定的数据
 <el-select v-model="bindPeople" multiple  style="width:220px" @change="bindChange">
                    <el-option label="111" value="322"></el-option>
                    <el-option label="1212" value="666"></el-option>
                    <el-option label="777" value="777"></el-option>
                </el-select>
//change事件
  bindChange(e){
      if(e.length>2){
        this.$message.warning("最多只能绑定两位快递员");
        this.bindPeople.splice(-1);
      }
    }
`el-select` 是 Element UI 提供的一个下拉选择组件,它支持项模式,包括单。如果你想让 `el-select` 的模式下,在用户勾所有项后显示“全部”或者类似文本,而不是当前选择数量,这通常需要自定义一些功能。 Element UI 的默认行为并不直接提供这样的“全显示全部”的功能,但你可以通过以下几个步骤来实现: 1. **监听中状态变化**:在 `el-select` 上添加 `@change` 或 `@select` 事件监听器,当所有项都被勾时触发某个处理函数。 ```html <el-select v-model="selectedValues" @change="onSelectChange"> <!-- ... --> </el-select> ``` 2. **设置数据结构**:确保你在数据源中有一个特殊的值,比如 `all` 或 `selectAll`,表示全状态。 ```js data() { return { options: [ // ..., { value: 'all', label: '全部' }, // ... ], selectedValues: [], }; } ``` 3. **判断并切换显示内容**:在 `onSelectChange` 函数中检查是否所有项都已中,并相应地更新展示的内容。如果中了 "all",则将所有中的真实值替换为 "all" 的字符串显示。 ```js methods: { onSelectChange(values) { if (values.length === this.options.length && values.includes('all')) { this.selectedValues = ['all']; // 显示 "全部" this.displayText = '全部'; } else { this.displayText = values.length; // 或者其他计算方式 } } } ``` 4. **显示文字**:最后,在模板上显示 `displayText` 而不是实际的选择值,如 `<span>{{ displayText }}</span>`。 注意,这个例子仅作参考,实际的实现可能会根据你的项目需求和具体的UI设计有所不同。如果你想要一个更完整的解决方案,可能需要查阅 Element UI 的官方文档和示例代码,或者参考其提供的API及自定义组件的例子。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值