select复选框只能添加不能删除值

nina夏然

已于 2023-07-10 19:17:46 修改

阅读量199

点赞数

文章标签：前端 java javascript

于 2023-07-10 19:04:59 首次发布

本文链接：https://blog.csdn.net/nina1994/article/details/131645894

版权

需求：产品的要求是，该复选框可以增加企业但是不能删除企业。所以只能添加不能删除。

                        <Select
                            showSearch
                            allowClear={false} //不允许全部清除
                            placeholder="请选择"
                            mode={"multiple"}
                            value={EntValue}
                            
                        >
                            { EntList  || []).map((item, index) =>
                                <Select.Option
                                    key={item.EntId}
                                    value={JSON.stringify(item)} //因为数组内是对象，要转化为字符串
                                    label={item.EntShortName}
                                    disabled={this.showDeselect(item)} //将已经选过的值更新disabled为true
                                >
                                    {item.EntShortName}
                                </Select.Option>)}
                        </Select>

const EntList  =[
  {
    "EntId": 3,
    "EntShortName": "电子",
    "RcrtQuotaIds": [
      419686
    ],
  },
  {
    "EntId": 131,
    "EntShortName": "龙腾",
    "RcrtQuotaIds": [
      419685
    ],
  },
  {
    "EntId": 201,
    "EntShortName": "小明",
    "RcrtQuotaIds": [
      419684
    ],
  },
  {
    "EntId": 10022,
    "EntShortName": "华南",
    "RcrtQuotaIds": [
      419680
    ],
  }
]

showDeselect = (item)=>{
        const {view:{EntValue}}= this.props.Store;
        const newEntValue = JSON.parse(JSON.stringify(toJS(EntValue)))
        const array = newEntValue .map((item)=> JSON.parse(item));//多选的值，因为赋值时有JSON.stringfy操作，所以这里再改为对象
        // 需要注意的是，因为我这边的item是一个对象，所以用了find相同的EntId做判断，如果是基本数据类型，可以直接用includes判断。includes是判断数组内的每个值是否与比较值全等，所以对象是用不了includes的。
        if(array.find(i=>i.EntId === item.EntId))return true;
        else return false
    }