使用antd的select实现动态增加多行以及禁用已选中数据

一、效果：

1.可动态增加当前行数据

2.当前行选中的数据在当前行下拉列表不禁用

3.禁用其他行选中的数据

二、踩坑

1.隐藏，会使节点所在地方白屏。

2.删除过滤，会使渲染的是选中的value值，而不是label

3.直接添加禁用属性，使选中不可单个删除

三、实现

定义hooks

const [storeHouse, setStoreHouse] = useState<any[]>([]);

使用form监听，使用onValuesChange监听form表单变化

 onValuesChange={(change: any, now: any) => {
 //change是改变的值，now是当前表单的数据
            if (change.xxx1) {
              // 判断当前字段最外层监听是否变化，xxx1是动态表单外层字段
              if (change.xxx1.filter((item: any) => item !== null)) {
                let arr: any[] = [];
                //将已填写表单数据循环
                now.xxx1
                  .forEach((item: any) => {
                    if (item?.xxx2) {
                      arr.push(item?.xxx2);
                    }
                  });
                    //数组使用set去重以及Arr.from转成数组形式
                const newArr = Array.from(new Set([...arr]));
                setStoreHouse(newArr);
              }
            }
          }}

3.动态增加，此处省略动态增加逻辑

<Form.List name="xxx1" initialValue={[{}]}>
                {(fields, { add, remove }) => (
                  <>
                    {fields.map(({ key, name, ...restField }, index) => (
                          <Form.Item
                            {...formItemLayout}
                            name={[name, 'repositoryIdList']}
                            label="A"
                          >
                            <Select
                              mode="multiple"//多选
                              allowClear
                              }
                            >
                              {xxx2.map((item: any) => {
//parthName获取当前字段值
                                const checkValue = form.getFieldValue([
                                  'xxx1',
                                  name,
                                  'xxx2',
                                ]);
                                if (storeHouse?.includes(item.value)) {
                                  if (checkValue?.includes(item.value)) {
                                    // 将当前行选中解除禁用
                                    return (
                                      <Option disabled={false} value={item.value} key={item.value}>
                                        {item.label}
                                      </Option>
                                    );
                                  } else {
                                    return (
                                      // 禁用其他行选中
                                      <Option disabled={true} value={item.value} key={item.value}>
                                        {item.label}
                                      </Option>
                                    );
                                  }

                                  //   { ...item, disabled: true };
                                } else {
                                  return (
                                    // 未选的仓库不禁用
                                    <Option value={item.value} key={item.value}>
                                      {item.label}
                                    </Option>
                                  );
                                }
                              })}

                              {/* <Option></Option> */}
                            </Select>
                          </Form.Item>
                    <Col span={22}>
                      <Button
                        type="dashed"
                        onClick={() => add()}
                        block
                        icon={<PlusOutlined />}
                      >
                        新增
                      </Button>
                    </Col>
                  </>
                )}
              </Form.List>