2021-ant design pro 表单、表格（columns） 下拉框从后台拉取数据，并初始化值（options/valueEnum）

ant design pro 表单、表格（columns）下拉框从后台拉取数据，并初始化值（options/valueEnum）

一，首先从后台将数据拉取到指定的数组

//初始化數據用
    const [companyAliasList, setCompanyAlias] = useState<API.OptionsData[]>([]);//公司別
  const initCompanyAlias = async () => {
        //获取数据清单
        sysDictHead = { dictServiceKey: 'finance.epa', dictGroupKey: 'finance.epa', dictKey: 'finance.epa.costRules' }
        //这里异步请求后台将数据拿到
        const dictList = await fetchRemoteData(sysDictHead);
        let companyAliaslist: API.OptionsData[] = [];
        dictList.forEach(item => {
                const valueObj = JSON.parse(item.dictValue as string);
                //注意 <ProFormSelect>组件下拉框的值需要label与value属性，因此这里将数据放到一个对象的label与value
                const tempDetail = { label: '', value: '', };
                tempDetail.label = valueObj.sapCompanyCode;
                tempDetail.value = valueObj.sapCompanyCode;
                companyAliaslist.push(tempDetail);
            })
            //这一步是去重操作，如果你的数据里没有重复的，可以省略
        let obj: API.OptionsData = {};
        companyAliaslist = companyAliaslist.reduce((cur, next) => {
            obj[next.label] ? "" : obj[next.label] = true && cur.push(next);
            return cur;
        }, []) //设置cur默认类型为数组，并且初始值为空的数组
        setCompanyAlias(companyAliaslist)
    };

/这样就将数据放在了companyAliasList里面，接下来就是用他了

一，表单下拉框初始化值（options）

我这里是**<ProForm>**下的 <ProFormSelect>

<ProForm>
 		<ProForm.Group>
                        <ProFormSelect
                            width="sm"
                            //用过options将数据放进去
                            options={companyAliasList}
                            name="companyAlias"
                            label="公司别"
                            rules={[{ required: true, message: '请选择公司别!' }]}
                            placeholder='请选择公司别'
                        />
        <ProForm.Group>
</ProForm>

二，给表格里的下拉框赋值（valueEnum）

这里我就将表格组件省略，只将重要的columns展示给大家
注意看**valueEnum**，这里就是将数据取出来返回给这一列

const columns: ProColumns<DataSourceType>[] = [
        {
            title: '区域别',
            key: 'areaName',
            dataIndex: 'areaName',
            width: '30%',
            valueType: 'select',
            valueEnum: () => {
                const options = {};
                areaTypeList.forEach((item) => {
                    options[item.value] = item.label
                });
                return options;
            },
        },
        {
            title: '区域别金额',
            width: '40%',
            dataIndex: 'areaMoney',
        },
        {
            title: '操作',
            valueType: 'option',
        },
    ];