【工具篇】10分钟学会Ant Design of React用法
程序员文章站
2024-03-11 20:01:07
...
Ant Design of React用法
antd是基于Ant Design设计体系的React UI组件库，主要用于研发企业级中后台产品。
✨ 特性#
- ???? 提炼自企业级中后台产品的交互语言和视觉风格。
- ???? 开箱即用的高质量 React 组件。
- ???? 使用 TypeScript 开发，提供完整的类型定义文件。
- ⚙️ 全链路开发和设计工具体系。
- ???? 数十个国际化语言支持。
- ???? 深入每个细节的主题定制能力。
下面，就开始今天的学习，马上就到10月份了呀，还有好多事情都没完成~
一、准备React模板
本次基于10分钟快速搭建React后台管理系统模板 其源码地址
在上述源码的基础上，对src/config/menuConfig.js进行修改，
const menuList = [
{
title: '首页',
key: '/admin/home'
},
{
title: 'UI',
key: '/admin/ui',
children: [
{
title: '按钮',
key: '/admin/ui/buttons',
},
{
title: '弹框',
key: '/admin/ui/modals',
},
{
title: 'Loading',
key: '/admin/ui/loadings',
},
{
title: '通知提醒',
key: '/admin/ui/notification',
},
{
title: '全局Message',
key: '/admin/ui/messages',
},
{
title: 'Tab页签',
key: '/admin/ui/tabs',
},
{
title: '图片画廊',
key: '/admin/ui/gallery',
},
{
title: '轮播图',
key: '/admin/ui/carousel',
}
]
},
{
title: '表单',
key: '/admin/form',
children: [
{
title: '登录',
key: '/admin/form/login',
},
{
title: '注册',
key: '/admin/form/reg',
}
]
},
{
title: '表格',
key: '/admin/table',
children: [
{
title: '基础表格',
key: '/admin/table/basic',
},
{
title: '高级表格',
key: '/admin/table/high',
}
]
}
];
export default menuList;
二、Ant-UI组件学习
2.1 按钮组件
- 基础按钮
- 图形按钮
- Loading按钮
- 按钮组
- 按钮尺寸
import React from 'react';
import {Row,Radio,Card,Button} from 'antd';
import './index.less';
import { PlusOutlined,EditOutlined,DeleteOutlined,DownloadOutlined,SearchOutlined,LeftOutlined,RightOutlined } from '@ant-design/icons';
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
loading:true,
size:"default"
};
}
handleCloseLoading=()=>{
this.setState({
loading:false
})
}
handleChange=(e)=>{
this.setState({
size:e.target.value
})
}
render() {
return (
<div>
<Row>
<Card title="基础按钮" className="base_button" >
<Button type="primary">按钮</Button>
<Button>按钮</Button>
<Button type="dashed">按钮</Button>
<Button type="danger">按钮</Button>
<Button disabled>按钮</Button>
</Card>
<Card title="图形按钮" className="base_button" >
<Button icon={<PlusOutlined />}>创建</Button>
<Button icon={<EditOutlined />}>编辑</Button>
<Button icon={<DeleteOutlined />}type="dashed">删除</Button>
<Button icon={<SearchOutlined />} type="primary">搜索</Button>
<Button icon={<DownloadOutlined />} type="primary">下载</Button>
</Card>
<Card title="Loading按钮" className="base_button" >
<Button type="primary" loading={this.state.loading}>确定</Button>
<Button type="primary" shape="circle" loading={this.state.loading}></Button>
<Button loading={this.state.loading}>点击加载</Button>
<Button shape="circle" loading={this.state.loading}></Button>
<Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
</Card>
<Card title="按钮组" className="base_button" >
<Button.Group>
<Button type="primary" icon={<LeftOutlined/>}>返回</Button>
<Button type="primary" icon={<RightOutlined/>}>前进</Button>
</Button.Group>
</Card>
<Card title="按钮尺寸" className="base_button" >
<Radio.Group value={this.state.size} onChange={this.handleChange}>
<Radio value="small">小</Radio>
<Radio value="default">中</Radio>
<Radio value="large">大</Radio>
</Radio.Group>
<Button size={this.state.size} type="primary">按钮</Button>
<Button size={this.state.size} >按钮</Button>
<Button size={this.state.size} type="dashed">按钮</Button>
<Button size={this.state.size} type="danger">按钮</Button>
<Button size={this.state.size} disabled>按钮</Button>
</Card>
</Row>
</div>
);
}
}
export default index;
2.2 弹框
- 基础模态框
- 信息确定框
import React from 'react';
import {Row,Modal,Card,Button} from 'antd';
import './index.less';
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
showModal1:false,
showModal2:false,
showModal3:false,
showModal4:false
};
}
handleOpen=(type)=>{
this.setState({
[type]:true
})
}
handleConfirm=(type)=>{
Modal[type]({
title:"确定？",
content:"你确定你学会React了吗？",
onOk(){
console.log("OK")
},
onCancel(){
console.log("Cancel")
}
})
}
render() {
return (
<Row>
<Card title="基础模态框" className="card-wrap">
<Button type="primary" onClick={()=>this.handleOpen("showModal1")}>Open</Button>
<Button type="primary" onClick={()=>this.handleOpen("showModal2")}>自定义页脚</Button>
</Card>
<Card title="信息确认框" className="card-wrap">
<Button type="primary" onClick={()=>this.handleConfirm("confirm")}>Confirm</Button>
<Button type="primary" onClick={()=>this.handleConfirm("info")}>Info</Button>
<Button type="primary" onClick={()=>this.handleConfirm("success")}>Success</Button>
<Button type="primary" onClick={()=>this.handleConfirm("warning")}>Warning</Button>
</Card>
<Modal title="antd" visible={this.state.showModal1} onCancel={()=>{
this.setState({
showModal1:false
})
}} >
<p>Antd Design of React 之弹窗学习</p>
</Modal>
<Modal title="antd" okText={"好了"} cancelText={"算了"} visible={this.state.showModal2} onCancel={()=>{
this.setState({
showModal2:false
})
}} >
<p>Antd Design of React 之弹窗学习</p>
</Modal>
</Row>
);
}
}
export default index;
2.3 Loading
- Spin的用法
- 内容Loading…
import React from 'react';
import {Row,Modal,Card,Button,Spin, Alert} from 'antd';
import './index.less';
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<Row>
<Card title="Spin的用法" className="card-wrap">
<Spin size="small"/>
<Spin/>
<Spin size="large"/>
</Card>
<Card title="内容遮罩" className="card-wrap">
<Alert message="React" description="Antd Pro Design of React教程学习" type="info">
</Alert>
<Alert message="React" description="Antd Pro Design of React教程学习" type="warning">
</Alert>
<Spin tip="加载中">
<Alert message="React" description="Antd Pro Design of React教程学习" type="warning">
</Alert>
</Spin>
</Card>
</Row>
);
}
}
export default index;
2.4 通知提醒
import React from 'react';
import {Row,Modal,Card,Button,notification} from 'antd';
import './index.less';
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
handleNotice=(type,direction)=>{
if(direction){
notification.config({
placement:direction
})
}
notification[type]({
message:"天气播报",
description:"今天晴转多云，温度28度，注意保暖！！！"
});
}
render() {
return (
<div>
<Row>
<Card title="消息通知框" className="card-wrap">
<Button type="primary" onClick={()=>this.handleNotice("success")}>success</Button>
<Button type="primary" onClick={()=>this.handleNotice("info")}>info</Button>
<Button type="primary" onClick={()=>this.handleNotice("warning")}>warning</Button>
<Button type="primary" onClick={()=>this.handleNotice("error")}>error</Button>
</Card>
<Card title="消息通知框的出现位置" className="card-wrap">
<Button type="primary" onClick={()=>this.handleNotice("success","topLeft")}>success</Button>
<Button type="primary" onClick={()=>this.handleNotice("info","topRight")}>info</Button>
<Button type="primary" onClick={()=>this.handleNotice("warning","bottomLeft")}>warning</Button>
<Button type="primary" onClick={()=>this.handleNotice("error","bottomRight")}>error</Button>
</Card>
</Row>
</div>
);
}
}
export default index;
2.5 全局Message
import React from 'react';
import {Row,Modal,Card,Button,message, Alert} from 'antd';
import './index.less';
class index extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
onMessage=(type)=>{
message[type]({
content:"恭喜你中了500万"
})
}
render() {
return (
<div>
<Row>
<Card title="全局Message提示框的用法" className="card-wrap">
<Button type="primary" onClick={()=>this.onMessage("success")}>success</Button>
<Button type="primary" onClick={()=>this.onMessage("info")}>info</Button>
<Button type="primary" onClick={()=>this.onMessage("warning")}>warning</Button>
<Button type="primary" onClick={()=>this.onMessage("error")}>error</Button>
<Button type="primary" onClick={()=>this.onMessage("loading")}>loading</Button>
</Card>
</Row>
</div>
);
}
}
export default index;
2.6 Tab页签
-
基础Tab演示
-
Tab带图标演示
-
Tab带增删的页签
import React from 'react';
import {Row,Tabs,Card,Button,message} from 'antd';
import './index.less';
import { PlusOutlined,EditOutlined,DeleteOutlined,DownloadOutlined,SearchOutlined,LeftOutlined,RightOutlined } from '@ant-design/icons';
const {TabPane} = Tabs;
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
newTabIndex = 0;
handleCallback = (key)=>{
message.info("Hi,您选择了页签："+key)
}
componentWillMount(){
const panes = [
{
title:'Tab 1',
content: 'Tab 1',
key:'1'
},
{
title: 'Tab 2',
content: 'Tab 2',
key: '2'
},
{
title: 'Tab 3',
content: 'Tab 3',
key: '3'
}
]
this.setState({
activeKey: panes[0].key,
panes
})
}
onChange = (activeKey)=>{
this.setState({
activeKey
})
}
onEdit = (targetKey, action) => {
this[action](targetKey);
}
add = () => {
const panes = this.state.panes;
const activeKey = `newTab${this.newTabIndex++}`;
panes.push({ title: activeKey, content: 'New Tab Pane', key: activeKey });
this.setState({ panes, activeKey });
}
remove = (targetKey) => {
let activeKey = this.state.activeKey;
let lastIndex;
this.state.panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const panes = this.state.panes.filter(pane => pane.key !== targetKey);
if (lastIndex >= 0 && activeKey === targetKey) {
activeKey = panes[lastIndex].key;
}
this.setState({ panes, activeKey });
}
render() {
return (
<div>
<Row>
<Card title="Tab基础演示" className="base_button" >
<Tabs>
<TabPane tab="tab1" key="1">
content of tabl
</TabPane>
<TabPane tab="tab2" key="2">
content of tab2
</TabPane>
<TabPane tab="tab3" key="3">
content of tab3
</TabPane>
</Tabs>
</Card>
<Card title="Tab带图标演示" className="base_button" >
<Tabs>
<TabPane tab={<span><PlusOutlined/>"tab1"</span>} key="1">
content of tabl
</TabPane>
<TabPane tab={<span><EditOutlined/>"tab2"</span>} key="2">
content of tab2
</TabPane>
<TabPane tab={<span><DeleteOutlined/>"tab3"</span>} key="3">
content of tab3
</TabPane>
</Tabs>
</Card>
<Card title="Tab带图的页签" className="card-wrap">
<Tabs
onChange={this.onChange}
activeKey={this.state.activeKey}
type="editable-card"
onEdit={this.onEdit}
>
{
this.state.panes.map((panel)=>{
return <TabPane
tab={panel.title}
key={panel.key}
/>
})
}
</Tabs>
</Card>
</Row>
</div>
);
}
}
export default index;
2.7 图片画廊
import React from 'react';
import {Card,Row,Col,Modal} from 'antd';
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
visible:false
};
}
openGallery=(imgSrc)=>{
this.setState({
visible:true,
currentImg:'/gallery/' + imgSrc
})
}
render() {
const imgs = [
['1.png','2.png','3.png','4.png','5.png'],
['6.png','7.png','8.png','9.png','10.png'],
['11.png','12.png','13.png','14.png','15.png'],
['16.png','17.png','18.png','19.png','20.png'],
['21.png','22.png','23.png','24.png','25.png'],
];
const imgList = imgs.map((list)=>list.map((item)=>
<Card style={{marginBottom:10}} cover={<img src={'/gallery/'+item} onClick={()=>this.openGallery(item)}/>}>
<Card.Meta title="React Admin" description="Antd">
</Card.Meta>
</Card>
));
return (
<div className="card-wrap">
<Row gutter={10}>
<Col md={5}>
{imgList[0]}
</Col>
<Col md={5}>
{imgList[1]}
</Col>
<Col md={5}>
{imgList[2]}
</Col>
<Col md={5}>
{imgList[3]}
</Col>
<Col md={4}>
{imgList[4]}
</Col>
</Row>
<Modal width={300} height={500} visible={this.state.visible} title="图片画廊" onCancel={()=>{
this.setState({
visible:false
})
}} footer={null}>
{<img src={this.state.currentImg} alt="/" style={{width:'100%'}}/>}
</Modal>
</div>
);
}
}
export default index;
2.8 轮播图
- 文字背景轮播
- 图片轮播
import React from 'react';
import {Card,Row,Col,Carousel} from 'antd';
import './index.less';
class index extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<div>
<Card title="文字背景轮播" className="card-wrap">
<Carousel autoplay effect="fade">
<div><h3>Ant Motion Banner - React</h3></div>
<div><h3>Ant Motion Banner - Vue</h3></div>
<div><h3>Ant Motion Banner - Angular</h3></div>
</Carousel>
</Card>
<Card title="图片轮播" className="card-wrap">
<Carousel autoplay effect="fade">
<div>
<img src="/carousel-img/carousel-1.jpg" alt=""/>
</div>
<div>
<img src="/carousel-img/carousel-2.jpg" alt=""/>
</div>
<div>
<img src="/carousel-img/carousel-3.jpg" alt=""/>
</div>
</Carousel>
</Card>
</div>
);
}
}
export default index;
三、Ant-表单组件学习
3.1 登录
- 内联表单
- 外联表单
import React from 'react';
import { Form, Input, Button, Checkbox,Card } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './index.less';
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
username:'',
password:''
};
}
onInputChange=(e)=>{
let inputname = e.target.name;
let inputvalue = e.target.value;
this.setState({
[inputname]:inputvalue
})
}
onhandleSubmit=()=>{
console.log(this.state.username,this.state.password)
}
render() {
return (
<div>
<Card title="内敛表单" className="card-wrap-login">
<Form name="horizontal_login" layout="inline">
<Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
<Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码"/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
登录
</Button>
</Form.Item>
</Form>
</Card>
<Card title="外联表单" className="card-wrap">
<Form name="normal_login" className="login-form" initialValues={{ remember: true }}>
<Form.Item rules={[{ required: true, message: '请输入用户名！！！' }]}>
<Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
</Form.Item>
<Form.Item rules={[{ required: true, message: '请输入密码！！！' }]}>
<Input name="password" prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入密码" onChange={this.onInputChange}/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>记住密码</Checkbox>
</Form.Item>
<a className="login-form-forgot" href="">
忘记密码
</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button" onClick={this.onhandleSubmit}>
登录
</Button>
</Form.Item>
</Form>
</Card>
</div>
);
}
}
export default index;
3.2 注册
import React from 'react';
import { Form, Input, Button, Checkbox,Card,Radio,InputNumber,Select,Switch,DatePicker,Upload } from 'antd';
import { UserOutlined, LockOutlined,LoadingOutlined, PlusOutlined} from '@ant-design/icons';
import './index.less';
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
getBase64=(img, callback)=> {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
handleChange = info => {
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
this.getBase64(info.file.originFileObj, imageUrl =>
this.setState({
userImg:imageUrl,
loading: false,
}),
);
}
};
render() {
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const offsetLayout={
wrapperCol:{
xs:24,
sm:{
span:16,
offset:6
}
}
}
const RadioGroup = Radio.Group;
const { Option } = Select;
const TextArea = Input.TextArea;
return (
<div>
<Card title="注册表单" className="card-wrap">
<Form name="normal_login" className="login-form" initialValues={{ remember: true }}>
<Form.Item {...formItemLayout} name="username" label="用户名" rules={[{ required: true, message: '请输入用户名！！！' }]}>
<Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
</Form.Item>
<Form.Item {...formItemLayout} name="password" label="密码" rules={[{ required: true, message: '请输入密码！！！' }]}>
<Input name="password" prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入密码" onChange={this.onInputChange}/>
</Form.Item>
<Form.Item {...formItemLayout} name="sex" label="性别" rules={[{ required: true }]}>
<RadioGroup defaultValue="1">
<Radio value="1">男</Radio>
<Radio value="2">女</Radio>
</RadioGroup>
</Form.Item>
<Form.Item {...formItemLayout} name="age" label="年龄" rules={[{ required: true }]}>
<InputNumber min={1} max={100} defaultValue={18}/>
</Form.Item>
<Form.Item {...formItemLayout} name="state" label="状态" rules={[{ required: true }]}>
<Select defaultValue="3">
<Option value="1">上学</Option>
<Option value="2">工作</Option>
<Option value="3">财富*</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} name="hobby" label="爱好" rules={[{ required: true }]}>
<Select mode="multiple" defaultValue="4">
<Option value="1">游泳</Option>
<Option value="2">打篮球</Option>
<Option value="3">踢足球</Option>
<Option value="4">跑步</Option>
<Option value="5">爬山</Option>
<Option value="6">骑行</Option>
<Option value="7">桌球</Option>
<Option value="8">麦霸</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} name="is_married" label="是否已婚">
<Switch defaultChecked/>
</Form.Item>
<Form.Item {...formItemLayout} name="time" label="生日">
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
</Form.Item>
<Form.Item {...formItemLayout} name="address" label="地址">
<TextArea/>
</Form.Item>
<Form.Item {...formItemLayout} name="icon" label="头像">
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
onChange={this.handleChange}
>
{this.state.userImg ? <img src={this.state.userImg} alt="avatar" style={{ width: '100%' }} /> : <PlusOutlined />}
</Upload>
</Form.Item>
<Form.Item {...offsetLayout} name="xieyi" >
<Checkbox>我已阅读过<a href="#">协议</a></Checkbox>
</Form.Item>
<Form.Item {...offsetLayout} name="register" >
<Button type="primary" >注册 </Button>
</Form.Item>
</Form>
</Card>
</div>
);
}
}
export default index;
四、Ant-表单学习
4.1 基础表格
- 基础表格
- 动态表格渲染
- 动态表格嵌套单选按钮
- 动态表格嵌套多选按钮
- 动态表格分页功能
import React from 'react';
import {Button,Modal,Card,Table, message} from 'antd';
import './index.less';
import axios from '../../../axios/index';
import Utils from '../../../utils/utils';
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource2:[]
};
}
param = {
page :1
}
componentDidMount(){
const dataSource = [
{
key: '1',
id:'1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
hobby:'1'
},
{
id:'2',
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
hobby:'2'
},
];
this.setState({
dataSource:dataSource
})
this.request();
}
// request=()=>{
// let baseUrl = " https://www.easy-mock.com/mock/5f640a22d75a98083f498fb2/admin";
// axios.get(baseUrl+"/table/list").then((res)=>{
// if(res.status=='200'){
// this.setState({
// dataSource2:res.data.result
// })
// }
// })
// }
request=()=>{
let _this = this
axios.ajax({
url:'table/list',
data:{
param:{
page:this.param.page
}
}
}).then((res)=>{
if(res.code == 0){
this.setState({
dataSource2:res.result.list,
pagination:Utils.pagination(res,(current)=>{
_this.param.page = current;
this.request();
})
})
}
})
}
onRowClick=(record,index)=>{
let selectKey = [index+1]
Modal.info({
titl:"信息",
content:`用户:${record.name}`
})
this.setState({
selectedRowKeys:selectKey,
selectedItem:record
})
}
handleDelete=()=>{
let rows = this.state.selectedRows;
let ids = [];
rows.map((item)=>{
ids.push(item.id)
})
Modal.confirm({
title:"删除提示",
content:`您确定要删除这些数据吗？${ids.join(',')}`,
onOk:()=>{
message.success("删除成功")
this.setState({
selectedRowKeys:[],
selectedRows:null
})
}
})
}
render() {
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
{
title:'爱好',
dataIndex:'hobby',
key:'hobby',
render(hobby){
let config = {
'1':"跑步",
"2":"散步"
}
return config[hobby]
}
}
];
const selectedRowKeys = this.state.selectedRowKeys;
const rowSelection ={
type:'radio',
selectedRowKeys
}
const rowCheckSelection ={
type:"checkbox",
selectedRowKeys,
onChange:(selectedRowKeys,selectedRows)=>{
// selectedRows.map(()=>{
// let ids = [];
// selectedRows.map((item)=>{
// ids.push(item.id)
// })
this.setState({
selectedRowKeys,
selectedRows
})
}
}
return (
<div>
<Card title="基础表格" className="wrap">
<Table bordered dataSource={this.state.dataSource} columns={columns}/>
</Card>
<Card title="动态表格渲染" className="wrap">
<Table bordered dataSource={this.state.dataSource2} columns={columns}/>
</Card>
<Card title="动态表格嵌套单选按钮" className="wrap">
<Table rowSelection={rowSelection}
bordered
dataSource={this.state.dataSource2}
columns={columns}
onRow={(record,index) => {
return {
onClick: () => {
this.onRowClick(record,index);
}, // 点击行
onDoubleClick: event => {},
onContextMenu: event => {},
onMouseEnter: event => {}, // 鼠标移入行
onMouseLeave: event => {},
};
}}/>
</Card>
<Card title="动态表格嵌套多选按钮" className="wrap">
<div>
<Button type="primary" onClick={this.handleDelete}>删除</Button>
</div>
<Table rowSelection={rowCheckSelection}
bordered
dataSource={this.state.dataSource2}
columns={columns}
/>
</Card>
<Card title="动态表格分页功能" className="wrap">
<Table
bordered
dataSource={this.state.dataSource2}
columns={columns}
pagination={this.state.pagination}
/>
</Card>
</div>
);
}
}
export default index;
static ajax(options){
let baseApi = "https://www.easy-mock.com/mock/5f640a22d75a98083f498fb2/admin"
return new Promise((resolve,reject)=>{
axios({
url:options.url,
method:'get',
baseURL:baseApi,
timeout:5000,
params:(options.data&&options.data.params) || ''
}).then((response)=>{
if(response.status=='200'){
let res = response.data
if(res.code=='0'){
resolve(res);
}else{
Modal.info({
title:"提示",
content:res.msg
})
}
}else{
reject(response.data)
}
})
})
}
4.2 高级表格
- 高级表格-表头固定
- 高级表格-列固定
- 高级表格-列排序
- 高级表格-按钮嵌套
import React from 'react';
import {Button,Modal,Card,Table, message, Badge} from 'antd';
import './index.less';
import axios from '../../../axios/index';
import Utils from '../../../utils/utils';
class index extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource:[]
};
}
param = {
page :1
}
componentDidMount(){
this.request();
}
request=()=>{
let _this = this
axios.ajax({
url:'table/list',
data:{
param:{
page:this.param.page
}
}
}).then((res)=>{
if(res.code == 0){
this.setState({
dataSource:res.result.list,
pagination:Utils.pagination(res,(current)=>{
_this.param.page = current;
this.request();
})
})
}
})
}
handleChange=(pagination, filters, sorter)=>{
this.setState({
sortOrder:sorter.order
})
}
handleDelete=(item)=>{
let id = item.id;
Modal.confirm({
title:"确定",
content:"你确定要删除吗？",
onOk:()=>{
message.success("删除成功");
this.request();
}
})
}
render() {
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width:80
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width:80
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title:'爱好',
dataIndex:'hobby',
width:80,
key:'hobby',
render(hobby){
let config = {
'1':"跑步",
"2":"散步"
}
return config[hobby]
}
}
];
const columns2 = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width:80
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width:80
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title:'爱好',
dataIndex:'hobby',
width:80,
key:'hobby',
render(hobby){
let config = {
'1':"跑步",
"2":"散步"
}
return config[hobby]
}
}
];
const columns3 = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width:80
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width:80
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
width:80,
sorter:(a,b)=>{
return a.age-b.age;
},
sortOrder:this.state.sortOrder
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width:80
},
{
title:'爱好',
dataIndex:'hobby',
width:80,
key:'hobby',
render(hobby){
let config = {
'1':"跑步",
"2":"散步"
}
return config[hobby]
}
}
];
const columns4 = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '操作',
render:(text,item)=>{
return <Button size="small" onClick={()=>this.handleDelete(item)}>删除</Button>
}
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
{
title:'爱好',
dataIndex:'hobby',
key:'hobby',
render(hobby){
let config = {
'1':<Badge status="success" text="跑步"/>,
"2":<Badge status="error" text="散步"/>
}
return config[hobby]
}
}
];
return (
<div>
<Card title="高级表格-头部固定" className="wrap">
<Table bordered dataSource={this.state.dataSource} columns={columns} scroll={{y:240}}/>
</Card>
<Card title="左部表格渲染" className="wrap">
<Table bordered dataSource={this.state.dataSource} columns={columns2} scroll={{x:1700}}/>
</Card>
<Card title="表格排序" className="wrap">
<Table bordered dataSource={this.state.dataSource} columns={columns3} scroll={{y:240}}
onChange={this.handleChange}/>
</Card>
<Card title="表格嵌套按钮" className="wrap">
<Table bordered dataSource={this.state.dataSource} columns={columns4}/>
</Card>
</div>
);
}
}
export default index;
未完待续~~~~