// 如果下拉列表由后端数据请求。 切无全部,则手动拼接
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(请求后端的参数集合)
};