pro table 中搜索select联动另一个select的问题

发布时间 2023-09-27 20:43:22作者: 走走停停走走

 

问题一、一个select能联动另一个select

    // 部门project列表,从服务端获取
    const [deptProjListFromServer, setDeptProjListFromServer] = useState<{[key: string]: any}>([]);
    // 当前project
    const [currDepartmentId, setDepartmentId] = useState('1'); // department_id是对象的key
    const [currProjectId, setCurrProjectId] = useState(''); // project_id是对象的key
    // const [currProjectList, setCurrProjectList] = useState<{[key: number]: any}>([]); // project数组

    // const deptRequest = async () => {
    //   return departmentList;
    // };
    const onDepartmentSelect = (selected: any) => {
      setDepartmentId(selected);
      setCurrProjectId('all');
      // setCurrProjectList(deptProjListFromServer[selected]); TODO 强行修改后不生效了
    }
    const onProjectSelect = (selected: any) => {
      console.log('onProjectSelect', selected);
      setCurrProjectId(selected);
    }
    const projRequest = async () => {
      const projList: any = [];
      return projList;
    }


    useEffect(() => {
      request
        .get(deptProjUrl)
        .then(function(response) {
          if (response.code === 0) {
            const data = response.data;
            let targetOptionObj: any = {};
            for (let i = 0; i < data.length; i++) {
              const tmpArr1 = [{value: 'all', label: '全部'}];
              const tmpArr2 = data[i].projects.map((item: any) => {
                return {
                  value: '' + item.id,
                  label: item.name,
                }
              })
              targetOptionObj['' + data[i].dept_id] = tmpArr1.concat(tmpArr2);
            }
            console.log('targetOptionObj', targetOptionObj);
            setDeptProjListFromServer(targetOptionObj);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }, []);

 

{
        title: '部门',
        key: 'department_id',
        dataIndex: 'department_id',
        valueType: 'select',
        // fieldProps: {
        //   placeholder: "请选择部门",
        //   onChange: (val: any) => {
        //     console.log('setCurrProjectId', val);
        //     setCurrProjectId('all');
        //   }
        // },
        // request: deptRequest,
        renderFormItem: (item, { type, defaultRender }, form) => {
          // form.setFieldValue("project_id", 'all');
          return <Select 
            onSelect={onDepartmentSelect}
            options={departmentList}
          >
          </Select>
        },
        render:  (data, record, _)=> {
          return <span>{record.department_name}</span>;
        }
      },
      {
        title: '项目',
        key: 'project_id',
        dataIndex: 'project_id',
        valueType: 'select',
        fieldProps: (form, config: any) => {
          // console.log('project_id fieldProps', form, config);
        },
        renderFormItem: (item, { type, defaultRender }, form) => {
          form.setFieldValue('project_id', currProjectId);
          return <Select 
            value={currProjectId}
            onSelect={onProjectSelect}
            options={deptProjListFromServer[currDepartmentId]}
          >
          </Select>
        },
        render:  (data, record, _)=> {
          return <span>{record.project_name}</span>;
        }
      },

 

问题二、切换第一个select的时候,设置了默认值不生效的问题。

 只有这种方法是靠谱的。