Technologies used by the system: antDesignPro6 + Umi4 + antDesign + antDesignProComponents + other technologies
1. How to set the ModalForm component to automatically reset the form when it is destroyed?
modalProps={ { destroyOnClose: true }} // Reset form
Answer: Add the modalProps attribute to the ModalForm component and set destroyOnClose to true . Or in the parent component, dynamically display and hide the child components through a logical form, such as: { showChild && <Child />}, which will also automatically close the pop-up box and clear the form.
2. How to set the ProTable table component so that the title & column content are displayed directly on one line without wrapping the display?
scroll={ { x: 'max-content' }} // [Use with caution] Note: Once this attribute is set, the width and ellipsis attributes set in the column will be invalid! ! ! And once the maximum scrolling distance y in the vertical direction is set, if there are many columns, the x direction may be confused.
Small extension: You can set scroll={ { x: 1300, y: 500 }} maximum width & height (scroll bars will automatically appear if exceeded), and then set the width of each column to a fixed value, such as width: 100, only after setting ellipsis Take effect.
3. When using the confirm component in Modal, occasionally the OK and Cancel button texts of the pop-up box are displayed as English OK and Cancel texts.
Answer: Just set okText : "OK" and cancelText : "Cancel". These two attributes are enough. Other possible workaround not tried (removing internationalization): execute npm run i18n-remove . Or refer to other methods: https://umijs.org/docs/max/i18n#useintl-%E8%8E%B7%E5%8F%96-intl-%E5%AF%B9%E8%B1%A1
4. When switching the left menu of the system, the background of the middle content display area does not have any loading effect.
Answer: Just create a new loading.tsx file in the project src directory .
// loading.tsx文件
import { PageLoading } from '@ant-design/pro-components';
export default () => {
return <PageLoading />;
};
5. How to set a certain column of proTable not to be displayed in the column setting drop-down box.
Answer: Just add hideInSetting: true to the column configuration .
6. Add the ref attribute to the Button component of antd. How to declare the type to prevent ts verification errors?
import { useRef } from 'react';
const uploadBtnRef = useRef<HTMLButtonElement>(null);
<Button ref={uploadBtnRef} icon={<UploadOutlined />}>
上传
</Button>7. How to set global variables and use them directly in the page?
Note: If there are multiple environments, the environment variables are dynamically modified with the current running environment. You need to specify the
UMI_ENVenvironment variables to automatically distinguish the values of different environment variables. For specific reference: Environment Variables - Ant Design Pro
process.env is an environment object in Node.js. It stores the system environment variable information.
Answer: In the config/config.ts file in the project root directory , just configure the define field.
export default defineConfig({
define: {
'process.env': {
APP_HOST_ACCESS: 'http://xxx/xxxx',
APP_HOST_WAYBILL: 'http://xxxx/xxx',
},
},
}}Use environment variables in the xx.tsx page:
export default function AddProject() {
console.log(process.env.APP_HOST_ACCESS) // http://xxx/xxxx
}Other extensions (to be confirmed) : Create a new .env-cmdrc file in the root directory of the project to dynamically read variable values in different environments based on the executed build command. --Currently it only takes effect when building and packaging. If it takes effect in a development environment, do you need to install the dotenv library additionally?
Reference: env-cmd: Set environment from file - I love learning network
# .env-cmdrc: 应用的环境变量配置文件（包含如：test、mock和product环境，环境名可自定义）
{
"test": {
"APP_BASE": "/xxx/test/",
},
"mock": {
"APP_BASE": "/xxx/mock/"
},
"product": {
"APP_BASE": "/xxx/product/"
}
}
In the package.json file:
8. How to set the entire search form of ProTable (including the query reset button) not to be displayed?
search={false}
9. How to set the properties of a search form box in ProTable, such as setting a custom placeholder?
Answer: It can be configured through the fieldProps attribute.
{
title: '模糊搜索框',
dataIndex: 'keywords',
hideInTable: true, // 表格中隐藏
key: 'keywords',
fieldProps: {
placeholder: '请输入用户编码、用户账户、姓名/企业名',
},
},
{
title: '注册时间',
valueType: 'dateTimeRange',
dataIndex: 'reconcileTime',
key: 'reconcileTime',
fieldProps: {
placeholder: ['开始时间', '结束时间']
},
},10. How to set a routing page not to be displayed in the left menu of the system?
Answer: Just add hideInMenu: true in the routing configuration .
{
path: '/businessManagement/ActionDetail',
name: 'xx页面',
hideInMenu: true, // 隐藏菜单显示
component: './BusinessManagement/Rent/components/ActionDetail',
},11. How to set the width of a search form box in ProTable?
Answer: Just add the colSize attribute in the column configuration .
{
title: '注册时间',
valueType: 'dateTimeRange',
dataIndex: 'reconcileTime',
key: 'reconcileTime',
colSize: 1.2, // 设置表单框宽度
search: {
// 自动将绑定的时间数组，拆分成2个字段，方便传参给后台
transform: (value: string[]) => ({ beginDate: value[0], endDate: value[1] }),
},
},12. How to set the subtitle and other information of ProTable?
Answer: Just set the toolbar object properties. Official website document: https://procomponents.ant.design/components/table#listtoolbarprops
<ProTable<DeliveryBillItem>
columns={columns}
actionRef={tableRef}
rowKey="id"
// headerTitle="运单列表" // 设置表格标题
toolbar={
{
title: '运单列表', // 设置表格标题，优先级比headerTitle高
subTitle: '提示：未对账运单，可以勾选并批量删除', // 设置子标题
... // 其他设置
}}
/>13. How to manually trigger form verification?
Answer: Through the validateFields method provided by the form instance . Note: This method returns a Promise, .then means the verification passes, and .catch means the verification fails.
// 触发某个字段的校验, 数组中添加要校验的表单字段名即可(可配置多个)
formRef?.current?.validateFields(['xxx'])
// 触发整个表单的校验
formRef?.current?.validateFields()
// Form组件
<Form ref={formRef}></Form>14. How to set ProTable to request a list for the first time, so that it needs to wait until the default initial conditions are requested & set before requesting the list?
Answer: Just set the manualRequest attribute of ProTable to true.
15. How to set ProTable to enable cross-page check?
Answer: Just set the preserveSelectedRowKeys attribute to true.
// rowSelection object indicates the need for row selection
const rowSelection = {
onChange: (_selectedRowKeys, selectedRows) => { ... },
getCheckboxProps: (record: DeliveryBillItem) => ({
// 设置部分行不能勾选
disabled: record.relateType === 2, // Column configuration not to be checked
}),
preserveSelectedRowKeys: true, // 跨页保留之前勾选项
};
<ProTable
rowSelection={
{ ...rowSelection }}
/>
16. If a certain column field in ProTable is the amount, how to automatically add a thousand separator and display the Chinese amount symbol ¥?
Answer: Just set the ValueType attribute value of the field in the columns array . Specific reference: https://procomponents.ant.design/components/schema#valuetype
valueType: money // Automatically add a thousand separator to a number and display the amount symbol ¥ (Note: 2 decimal places are retained by default)