antd 全称 Ant Design, 是目前来说运用最广泛的 react 的 ui 框架, 下文就用略写 antd 代替了
pro系列不做过多解释, 毕竟ui框架大家也都得心应手了, 好好看文档几乎没毛病
个人分析
优势: antd react确实是非常强大的ui框架, 其中的内容包含了前端几乎所有的ui, 运用此框架几乎可以不用写css样式
劣势: 学习难度大, 网上教程相对较少, 一遇到bug, 比较难解决
一, 安装
- 安装 antd
yarn add antd
- 安装 pro-table 系列
官方网址: https://procomponents.ant.design/docs/getting-started
yarn add @ant-design/pro-table
// or
cnpm i @ant-design/pro-table --save
// 其他pro系列安装
npm i @ant-design/pro-form --save
npm i @ant-design/pro-layout --save
npm i @ant-design/pro-table --save
npm i @ant-design/pro-list --save
npm i @ant-design/pro-descriptions --save
npm i @ant-design/pro-card --save
npm i @ant-design/pro-skeleton --save
这里要注意 antd 的版本问题, 最好采用4.0以上的版本分享下我现在使用的版本,
react版本 react@17.0.2 | MIT | deps: 2 | versions: 739 // npm info react
node版本 v16.4.2 // node -v
yarn版本 1.22.11 // yarn -version
dva版本 dva-cli version 0.10.1 // dva -v
nmi版本 ^2.9.0 // umi -v
antd版本 4.8.0
温馨提示: 一般antd安装之后, 普通的ui插件都能使用, 安装pro后引用就报错, 建议先替换antd版本, 直接在package.json中修改antd的版本, 然后删除node_modules内的文件, 重新 cnpm install 或者 yarn install
二, 常用字段
- columns 数组 表格列的配置描述 (下图红框内的配置)
columns = [
{
title:'名称',// (必填) 显示名称
dataIndex:'name',// (必填) 根据后台接口, 需要显示的字段
width:48,// (选填) 展示的宽度
valueEnum: {// (选填) 选择某个选项, 点击查询按钮可查询, valueEnum 可展示单选框 status可不填
0: { text: '全部', status: 'Default' },
1: { text: '关闭', status: 'Default' },
2: { text: '运行中', status: 'Processing' },
3: { text: '已上线', status: 'Success' },
4: { text: '异常', status: 'Error' },
all:{ text: '全选' }
},
initialValue: 1,// (选填) valueEnum的默认值
render: (_) => <a>{_}</a>,// (选填) 不在搜索时使用, 可嵌套标签展示数据, 多用于三目运算符展示比较复杂的数据
filterDropdown: () => (// (选填) 添加搜索条件, 此处以搜索框为例, 在表头和表格上方均有筛选条件
<div style={{ padding: 8 }}>
<Input style={{ width: 188, marginBottom: 8, display: 'block' }} />
</div>
),
filterIcon: (filtered) => (// (选填) 有搜索时, 可重新定义表头中的搜索icon
<SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
),
filters: [{text:'全选',value:'all'}],// (选填) 对某一列数据进行筛选,使用列的 filters 属性来指定需要筛选菜单的列
onFilter: (value, record) => record.name.indexOf(value) === 0,// (选填) 用于筛选当前数据
defaultSortOrder:'ascend', // (选填) 默认排列顺序 ascend | descend
valueType: 'money', // (选填) 值的类型,会生成不同的渲染器 (举例为金额)
}
]
- request 请求接口查询数据
getData方法内容
getData = (params)=>{
const { dispatch } = this.props;
dispatch({
type: 'login/login',
payload: {
params
},
callback: (res) => {
console.log(res)
},
});
}
- dataSource 表格展示的数据, 如下面例子
// 使用 dataSource={[]}
[{"key":0,"name":"AppName","containers":11,"creator":"付小小","status":"running","createdAt":1641364688922,"money":0,"progress":47,"memo":"简短备注文案"},{"key":1,"name":"AppName","containers":3,"creator":"林东东","status":"close","createdAt":1641364687979,"money":1538,"progress":8,"memo":"很长很长很长很长很长很长很长的文字要展示但是要留下尾巴"},{"key":2,"name":"AppName","containers":0,"creator":"曲丽丽","status":"close","createdAt":1641364688524,"money":1258,"progress":69,"memo":"简短备注文案"},{"key":3,"name":"AppName","containers":12,"creator":"林东东","status":"close","createdAt":1641364688493,"money":4530,"progress":14,"memo":"很长很长很长很长很长很长很长的文字要展示但是要留下尾巴"},{"key":4,"name":"AppName","containers":18,"creator":"曲丽丽","status":"close","createdAt":1641364687837,"money":3432,"progress":65,"memo":"简短备注文案"}]
- pagination 分页器
pagination={{
pageSize:2,// 每页条数
showQuickJumper: true,// 是否可以快速跳转至某页 (就是那个输入框)
// pageSizeOptions:[5,10,20,30,50,100], 指定每页可以显示多少条
// position: 'bottom' // 'top' 分页器显示位置
}}
- toolbar 表格的标题
toolbar={{
title: '高级表格',
tooltip: '这是一个标题提示',
}}
- toolBarRender 表格表头上方的按钮群
toolBarRender={() => [
<Button key="danger" danger>
危险按钮
</Button>,
<Button key="show">查看日志</Button>,
<Button type="primary" key="primary">
创建应用
</Button>,
<Dropdown key="menu" overlay={menu}>
<Button>
<EllipsisOutlined />
</Button>
</Dropdown>,
]}