|
阅读：5356回复：1
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 => <a>{key}</a>,
align:'center'
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
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 => (
<span>
{tags.map(tag => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</span>
),
},
{
title: '操作',
key: 'action',
align:'center',
render: (text, record,index) => (
<Space size="middle">
<Button type="primary">edit</Button>
<Button onClick={()=>this.isShanChu(index)}>delete</Button>
</Space>
),
},
];
return (
<div>
<Table
className={'tab'}
columns={columns}
dataSource={this.state.data}
pagination={this.fenye()}
/>
</div>
)
}先看分页吧：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 (
<div>
<Table
className={'tab'}
columns={columns}
dataSource={this.state.data}
pagination={this.fenye()}
/>
</div>
)分页函数内的两个回调函数：//点击页码事件
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) => (
<Space size="middle">
<Button type="primary">edit</Button>
<Button onClick={()=>this.isShanChu(index)}>delete</Button>
</Space>
),
},这里render相当于vue的scope,里面的参数分别为当前行的值，当前行数据，行索引 将当前行的index传出去过后在方法内接收 isShanChu(index){
console.log('获取的index==='+index);
const data = [...this.state.data];
data.splice(index,1)
this.setState({
data
})
}定义一个常量 dataconst data = [...this.state.data];将state内的data进行分割，然后再根据接收的index删除 data.splice(index,1)重新渲染 this.setState({
data
})效果： 图片：clipboard.png  点击delete按钮 图片：clipboard.png 只做了分页删除...添加编辑后面再做... |
|
最新喜欢： double...
|
|
沙发#
发布于：2020-07-02 07:26
666
|
|
|
