antd 选择器(select)限制选择个数

在护士站的签名功能中,使用了多选的select组件,通过v-model实现数据双向绑定。当change事件触发时,检查已选择的护士数组长度,如果超过2,则显示错误信息并移除最后一个选择,确保最多只能选择两个护士。
摘要由CSDN通过智能技术生成

我的需求场景是,护士站护士签名最多选择两个

1.思路,在select 选择用户(@change)的时候,判断已经选择的数组长度,话不多说上代码

<a-select showArrow mode="multiple" v-model="toursuccession" :allowClear="true" @change="nurserQuery">
        <a-select-option v-for="i in nurserole" :key="i.id">
             {{ i.actualname }}
        </a-select-option>
</a-select>

2.数据双向绑定  v-model

3.change的时候判断,如果长度大于2,直接删除就可以了

if(this.toursuccession.length>2){
        this.$message.error('最多只能选择两个护士')
        this.toursuccession.pop()
      }

好的,下面是一个antd select级联选择器的示例代码: ``` import React, { useState } from 'react'; import { Select } from 'antd'; const { Option } = Select; const CascaderSelect = () => { const [cities, setCities] = useState([]); const [regions, setRegions] = useState([]); const handleCountryChange = (value) => { setCities([]); setRegions([]); // 根据选中的国家,设置城市选项 if (value === 'china') { setCities(['beijing', 'shanghai', 'guangzhou']); } else if (value === 'usa') { setCities(['new york', 'washington', 'los angeles']); } else if (value === 'japan') { setCities(['tokyo', 'osaka', 'kyoto']); } } const handleCityChange = (value) => { setRegions([]); // 根据选中的城市,设置地区选项 if (value === 'beijing') { setRegions(['haidian', 'chaoyang', 'dongcheng']); } else if (value === 'shanghai') { setRegions(['pudong', 'minhang', 'xuhui']); } else if (value === 'guangzhou') { setRegions(['yuexiu', 'tianhe', 'haizhu']); } else if (value === 'new york') { setRegions(['manhattan', 'brooklyn', 'queens']); } else if (value === 'washington') { setRegions(['northwest', 'northeast', 'southeast']); } else if (value === 'los angeles') { setRegions(['hollywood', 'beverly hills', 'santa monica']); } else if (value === 'tokyo') { setRegions(['shibuya', 'shinjuku', 'harajuku']); } else if (value === 'osaka') { setRegions(['umeda', 'namba', 'tennoji']); } else if (value === 'kyoto') { setRegions(['higashiyama', 'nakagyo', 'shimogyo']); } } return ( <div> <Select style={{ width: 200 }} onChange={handleCountryChange}> <Option value="china">China</Option> <Option value="usa">USA</Option> <Option value="japan">Japan</Option> </Select> <Select style={{ width: 200, marginLeft: 10 }} onChange={handleCityChange}> {cities.map(city => ( <Option key={city} value={city}>{city}</Option> ))} </Select> <Select style={{ width: 200, marginLeft: 10 }}> {regions.map(region => ( <Option key={region} value={region}>{region}</Option> ))} </Select> </div> ); } export default CascaderSelect; ``` 这个示例代码中,我们使用了React的useState Hook来管理组件的状态,根据选中的国家和城市设置城市和地区选项。在Select组件中,我们使用了antd的Option组件来设置选项,onChange事件用来处理选项的变化,根据选中的值来动态更新组件的状态。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值