antd表格显示分页怎么取消_react + Ant Design 实现table表格分页和删除
首先下载 antd：
npm install antd --save引入：import {Table,Tag,Space,Button } from "antd";在回调函数里定义data为暂时数据
//回调函数
constructor(props){
super(props);
this.state= {
// 当前页
current:1,
// 每页显示
pageSize:3,
// 总条数
total:6,
// 默认显示第几页
defaultCurrent:2,
//是否点击跳转
showQuickJumper:true,
//数据
data : [
{
key: '1',
name: '王',
age: 32,
address: '成都',
tags: ['nice', 'developer'],
},
{
key: '2',
name: '李',
age: 18,
address: '乐山',
tags: ['loser'],
},
{
key: '3',
name: '蒋',
age: 11,
address: '眉山',
tags: ['cool', 'teacher'],
},
{
key: '4',
name: '吴',
age: 10,
address: '上海',
tags: ['cool', 'teacher'],
},
{
key: '5',
name: '杨',
age: 22,
address: '重庆',
tags: ['cool', 'teacher'],
},
{
key: '6',
name: '黄',
age: 20,
address: '自贡',
tags: ['cool', 'teacher'],
},
],
};
this.isShanChu = this.isShanChu.bind(this)
}
渲染
render() {
const columns = [
{
title: 'id',
dataIndex: 'key',
key: 'id',
render: key => {key},
align:'center'
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
render: text => {text},
align:'center'
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
align:'center'
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
align:'center'
},
{
title: '标签',
key: 'tags',
dataIndex: 'tags',
align:'center',
render: tags => (
{tags.map(tag => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
{tag.toUpperCase()}
);
})}
),
},
{
title: '操作',
key: 'action',
align:'center',
render: (text, record,index) => (
),
},
];
return (
className={'tab'} columns={columns} dataSource={this.state.data} pagination={this.fenye()} />
)
}先看分页吧：
class内定义一个分页的函数并且暴露申明
里面是分页的配置调用放在state里的值
class Test extends React.Component {
//分页
fenye(){
const fy = {
// 当前页
current:this.state.current,
// 每页显示
pageSize:this.state.pageSize,
// 总条数
total:this.state.total,
// 点击下一页
onChange:(current)=> this.changPage(current),
// 每页显示变化
onShowSizeChange:(Current,pageSize) =>{
console.log(pageSize);
this.onShowSizeChange(Current,pageSize)
},
// 默认第几页
defaultCurrent:this.state.defaultCurrent,
//是否可以跳转
showQuickJumper:this.state.showQuickJumper,
};
return fy
}
在table标签内定义pagination等于定义的分页函数：
return (
className={'tab'} columns={columns} dataSource={this.state.data} pagination={this.fenye()} />
)分页函数内的两个回调函数：
//点击页码事件
changPage(current){
console.log(current);
this.setState({
current:current
})
}
//变化回调
onShowSizeChange(Current,pageSize){
console.log(Current,pageSize)
}好了这样就可以了，接下来是删除事件：
首先给删除按钮添加点击事件：{
title: '操作',
key: 'action',
align:'center',
render: (text, record,index) => (
),
},
这里render相当于vue的scope,里面的参数分别为当前行的值，当前行数据，行索引
将当前行的index传出去过后在方法内接收
isShanChu(index){
console.log('获取的index==='+index);
const data = [...this.state.data];
data.splice(index,1)
this.setState({
data
})
}定义一个常量 data
const data = [...this.state.data];将state内的data进行分割，然后再根据接收的index删除
data.splice(index,1)重新渲染
this.setState({
data
})
效果：
图片：clipboard.png
点击delete按钮
图片：clipboard.png
只做了分页删除...添加编辑后面再做...