iview的Select多选框选择“不限”清空其他选项

最新推荐文章于 2023-06-30 09:59:39 发布

qq_47452289

最新推荐文章于 2023-06-30 09:59:39 发布

阅读量1.3k

点赞数 2

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_47452289/article/details/112626460

版权

本文介绍了如何在iview的Select组件中实现多选功能，并控制'不限'选项的显示与隐藏。通过监听on-change事件，判断用户选择的值，当选择'不限'时清空其他选项，反之则移除'不限'选项。关键代码包括对val数组的检查，以确定是否包含'-2'（代表'不限'），并据此调整选中项。

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

iview的Select多选框选择“不限”清空其他选项

需求如下，当选择不显得时候，清空其他选项，只留下不限选项，选择其他选项的时候，删除不限选项，可多选。

在这里插入图片描述

1、给下拉框绑定一个一个on-change事件

<Select
         v-model="adForm.ageRange"
         placeholder="请选择（可多选）"
         multiple
         @on-change="ageRangeChange">
          	<Option :value="item.selectKey" v-for="item in selectData.ageList" :key="item.selectKey">
            	{{item.selectVal}}
          	</Option>
</Select>

2、主要是判断当前是否选择了不限选项，此时的数组长度应该都是大于1的。

如果选了其他的选项，再选择不限，那么就清空所有选项，留下不限选项。此时不限选项一定是数组最后一个元素
如果只有不限选项，那么选择了其它选项就把不限选项删除，此时不限选项一定是数组第一个元素。

//：value为‘-2’，则代表不限选项
 ageRangeChange (val) {
  if (val.length > 1) {
    // 如果最后一个值为“-2”，就清空选中的数组，留下值为“-2”的不限选项
    if (val[val.length - 1] === '-2') {
    	this.adForm.ageRange=['-2']
    }
    // 如果包含值“-2”，就删除值为“-2”的不限选项
    else if (val.includes('-2')) {
      this.adForm.ageRange.shift()
    }
  }