判断select 全部与其他多选项的互斥

296 阅读1分钟
// 如果下拉列表由后端数据请求。 切无全部,则手动拼接
 const [allOption, setallOption] =useState<any>([{value :'all',label:'全部'}]) //全部初始化定义
  //请求获取数据部分
  GET_SELECT(
            {
               name:name ,
                age:age
            }
        ).then((res:any)=>{
            let result =res.result.data // 全量数据
            let values =res.result.values//需要选中的多选【selectValue】
            //拼接全部数据。 全部肯定是第一位
             let ops =  ([ {value :'all',label:'全部'},... result.data])
             setallOption (ops);
             setCostValue(values)
 }
 
 
//页面部分

          <div >
                <Select
                    maxTagCount={1}
                    value={selectValue}
                    placeholder="全部"
                    mode="multiple"
                    showSearch={false}
                    size="small"
                    style={{ width: 190, marginRight: '10px' }}
                    onChange={handleChangeCost}
                    options={allOption}
                />
       </div>
                        
//js切换多选部分

  //切换全部 【如果选全部。 其他的多选要清除。 如果选了其他的多选。 全部要清空】
    const handleChangeCost = (value: any) => {
        let newValue = [] as any;
        if (value.length == 0) { 
        // 如果没有被选中那直接默认全部
            newValue = ["all"];
        } else {
            // 判断当前点击的是不是all
            if (value.slice(-1) == "all") {
                newValue = ["all"];
            } else {
                if (value.includes("all")) {
                    value.splice(
                        value.findIndex((n) => n == "all"),
                        1
                    );
                }
                newValue = value;
            }
        }
       
        setCostValue(newValue);
        run(请求后端的参数集合)
    };