通过路由更换组件的方法
在配置中配置router 在跟路径下配置routers 这样就可以在跟组件中用{children}来展示子组件 用不同的路径切换组件
设置高度的方法
设置背景图的方法 这样设置完之后只需要设置对应容器的高度和宽度就好
antd中的Button设置样式
可直接设置样式
antd中的table的用法
1.columns 是列表头的标题
形式 [{ {
title: '表头的展示文本',
dataIndex: '对应数据的字段',
align: 'center' // 对齐方式
},}]
2.dataSource 列表的数据源
3.scroll 滚动轴及其相关配置
4.bordered 是走展示边框
5.rowSelection 表格项是否可以选择
配置项
(1)type:是单选还是多选
(2)selectedRowKeys:传入一个数组 指定选中项的 key 数组 要与onchange配合
(3)onChange:函数 (key)=>{} 每次改变选项 都会调用onChange 将选中的项的key数组传入
6.rowKey:指定key值
7.pagination 指定分页器
(1)defaultPageSize:每页的项数
(2)showSizeChanger:设置改变项数功能
(3)showQuickJumper:是否设置快速跳转功能
modal的使用
1.visible :modal框是否可见 当值为true时 modal框弹出 当为false时 modal框收回隐藏
2.onCancel 点击取消时调用的函数
3.onOk点击确定时调用的函数
form的使用
1.initialValues:默认值
2.form:需要与recat的useForm一起使用
首先用useForm创建一个form
const Myform = useForm()
然后在form中绑定
form = {Myform }
这样就能将一个form对象传递给Myform
然后就能在Myform 中执行操作
操作有
(1)resetFields:重置一组字段到 initialValues
Myform.resetFields()清空form表单
(2)setFieldsValue()设置表单的值
Myform.setFieldsValue(formData):formData是一个对象 {}格式是{
'formItem中的name字段':name字段对应的值
}
(3)validateFields:触发表单验证
const result = Myform.validateFields(['SNnumber', 'Risk', 'Persion']) //触发表单验证并返回一个promise //传的数组是name字段的数组
result.then((res) => {
console.log(res, '完成')
//在这里写请求数据函数 res是form表单中的结果数组
close()
}).catch((err) => {
console.log(err, '失败')
})
