通過路由更換組件的方法
在配置中配置router 在跟路徑下配置routers 這樣就可以在跟組件中用{children}來展示子組件 用不同的路徑切換組件
設置高度的方法
設置背景圖的方法 這樣設置完之后只需要設置對應容器的高度和寬度就好
antd中的Button設置樣式
可直接設置樣式
antd中的table的用法
1.columns 是列表頭的標題
形式 [{ {
title: '表頭的展示文本',
dataIndex: '對應數(shù)據(jù)的字段',
align: 'center' // 對齊方式
},}]
2.dataSource 列表的數(shù)據(jù)源
3.scroll 滾動軸及其相關配置
4.bordered 是走展示邊框
5.rowSelection 表格項是否可以選擇
配置項
(1)type:是單選還是多選
(2)selectedRowKeys:傳入一個數(shù)組 指定選中項的 key 數(shù)組 要與onchange配合
(3)onChange:函數(shù) (key)=>{} 每次改變選項 都會調(diào)用onChange 將選中的項的key數(shù)組傳入
6.rowKey:指定key值
7.pagination 指定分頁器
(1)defaultPageSize:每頁的項數(shù)
(2)showSizeChanger:設置改變項數(shù)功能
(3)showQuickJumper:是否設置快速跳轉(zhuǎn)功能
modal的使用
1.visible :modal框是否可見 當值為true時 modal框彈出 當為false時 modal框收回隱藏
2.onCancel 點擊取消時調(diào)用的函數(shù)
3.onOk點擊確定時調(diào)用的函數(shù)
form的使用
1.initialValues:默認值
2.form:需要與recat的useForm一起使用
首先用useForm創(chuàng)建一個form
const Myform = useForm()
然后在form中綁定
form = {Myform }
這樣就能將一個form對象傳遞給Myform
然后就能在Myform 中執(zhí)行操作
操作有
(1)resetFields:重置一組字段到 initialValues
Myform.resetFields()清空form表單
(2)setFieldsValue()設置表單的值
Myform.setFieldsValue(formData):formData是一個對象 {}格式是{
'formItem中的name字段':name字段對應的值
}
(3)validateFields:觸發(fā)表單驗證
const result = Myform.validateFields(['SNnumber', 'Risk', 'Persion']) //觸發(fā)表單驗證并返回一個promise //傳的數(shù)組是name字段的數(shù)組
result.then((res) => {
console.log(res, '完成')
//在這里寫請求數(shù)據(jù)函數(shù) res是form表單中的結(jié)果數(shù)組
close()
}).catch((err) => {
console.log(err, '失敗')
})
