ant design select多选时，选项中有“全选”和其他选项互斥时的处理方式

每一天，每一步

于 2024-06-03 13:46:55 发布

阅读量155

点赞数 2

分类专栏： ant design - react 文章标签：前端数据库

本文链接：https://blog.csdn.net/u010234868/article/details/139412587

版权

ant design - react 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

ant design select多选时，选项中有“全选”和其他选项互斥：

选了“全部”，选中项中就不能有省地市；选择省地市的时候，将“全部”从选中项中去除，只保留省地市。

  const handleSelectAreas = (values) => {
    let newVals = [];
    if (values[values.length - 1]) { // 最后选择的不是“全部”
      if (values.includes('')) { // values中已经包含“全部”
        // 去除“全部”
        newVals = values.filter(item => item);
      } else {
        newVals = [...values];
      }
    } else {
      newVals = [''];
    }
    setAreaId(newVals);
  };

         <Select
            mode="multiple"
            options={areaList}
            onChange={handleSelectAreas}
            value={areaId}
          />