antd Select组件mode=“multiple“ 限制选中个数

最新推荐文章于 2024-08-28 16:02:54 发布

心若向阳(*￣︶￣)

最新推荐文章于 2024-08-28 16:02:54 发布

阅读量3.5k

点赞数 2

分类专栏：知识累积 vue+ vite + antdv ant-design vue 文章标签： antd select multiple 下拉限制选中个数 findIndex

本文链接：https://blog.csdn.net/agua001/article/details/125065732

版权

知识累积同时被 3 个专栏收录

129 篇文章 3 订阅

订阅专栏

ant-design vue

58 篇文章 1 订阅

订阅专栏

vue+ vite + antdv

29 篇文章 3 订阅

订阅专栏

本文介绍了一个使用Vue.js实现的多选下拉框组件，展示了如何限制最多选中四个选项并禁用其余项。通过`v-model`、`:disabled`属性结合`findIndex()`方法来控制选中状态和禁用状态，从而实现需求。示例代码详细展示了这一功能的实现方式。

摘要由CSDN通过智能技术生成

1、有时需求需要下拉多选，但是显示选中个数，如最多可以选中四个，其它项置灰不可选

在这里插入图片描述

2、核心代码：(termActive.findIndex(i=> i === item.labelCode) === -1)

<div class="select-item" v-if="state.tabList.length">
  <span>监测项：</span>
  <a-select
    v-model:value="termActive"
    style="width: 250px"
    @change="termChange"
    mode="multiple"
    :maxTagCount="1"
  >
    <a-select-option :value="item.labelCode" v-for="item in state.tabList" :disabled="termActive.length == 4 && (termActive.findIndex(i=> i === item.labelCode) === -1)" :key="item.labelCode">{{ item.labelName }}</a-select-option>
  </a-select>
</div>
<script setup>
let termActive = ref([]);
</script>