问题一、一个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的时候,设置了默认值不生效的问题。
只有这种方法是靠谱的。
标签:const,pro,return,any,project,table,id,select From: https://www.cnblogs.com/zccst/p/17734258.html