React——antdTable组件的使⽤
今天刚刚运⽤antd做了个分页，根据官⽹上的指导和⼀些⾃⼰的摸索，将其完成，有些代码编写的还是⽐较繁琐，没有做简化。讲的还是⽐较详细的，有案例，本例在其基础上扩展了⼀下功能，现将其按照例⼦的⽅式记录下来，以供以后参考。
先将显⽰出来的效果放出来（注：本次案例是点击⼀次页码请求⼀页数据）：
编码过程⼤体需要以下⼏步：
1.初始化必要属性，如数据 data，数据条数 count;
2.设置table的表头标题，即，标题1，标题2这些;
3.请求数据，引⽤Table组件，添加相关属性;
4.添加相应的点击效果;
嗯，应该就这些，下边开始详细讲。
最初，如果⽐较懒，没有要求特别的样式，可以⽤antd所给的样式：import '~/antd/dist/antd.css'，具体路径依照各⾃的结构有区别。
初始化数据：
getInitialState() {
  this.tableColumns = [];  //初始定义表头菜单
  return{
queryInfo : {    //设置最初⼀页显⽰多少条
  pageSize: 10
},
dataSource:{    //数据存放
  count: 0,    //⼀共⼏条数据
  data: [],    //数据
    　},
loading: false  //Load属性设置
  }
}
数据初始完成后开始各种定义，使数据丰富有效起来；设置table的表头标题：
getTable() {    //函数封装
this.tableColumns = [{
title: '菜单1',        //菜单内容
dataIndex: 'cloud_computing_mark',  //在数据中对应的属性
key: 'cloud_computing_mark'  //key
}, {
title: '菜单2',
dataIndex: 'project_name',
key: 'project_name'
}, {
title: '菜单3',
dataIndex: 'data_scope',
key: 'data_scope'
}, {
title: '菜单4',
dataIndex: 'description',
key: 'description',
}, {
title: '操作',
key: 'operation',
render: (text, record) => (  //塞⼊内容
<span>
  <a className="edit-data" onClick={this.editSource.bind(this,text)}>编辑</a>
  <a className="delete-data" onClick={this.deletSource.bind(this,text)}>删除</a>
  <Link className="topo-data" to={{pathname:'/a',query:{id:text.id}}}>数据拓扑</Link>
</span>
),
}];
},
请求数据（这边就写请求成功后的，我⽤的是JSON请求的⽅式），初次请求数据设置这些即可：
promise.then(function(data) {
this.setState({
dataSource:{
count: unt,
data: data.data,
page: 1
},
});
}.bind(this))
开始引⽤Table组件：
react native <Table
columns={self.tableColumns} //th菜单项
rowKey={record => istered}
dataSource={this.state.dataSource.data} //数据
pagination={{  //分页
total: this.unt, //数据总数量
pageSize: this.state.queryInfo.pageSize,  //显⽰⼏条⼀页
defaultPageSize: this.state.queryInfo.pageSize, //默认显⽰⼏条⼀页
showSizeChanger: true,  //是否显⽰可以设置⼏条⼀页的选项
onShowSizeChange(current, pageSize) {  //当⼏条⼀页的值改变后调⽤函数，current：改变显⽰条数时当前数据所在页；pageSize：改变后的⼀页显⽰条数  Selectchange(current, pageSize); //这边已经设置了self = this
},
onChange(current) {  //点击改变页数的选项时调⽤函数，current：将要跳转的页数
},
showTotal: function () {  //设置显⽰⼀共⼏条数据
return '共 ' + this.unt + ' 条数据';
}
}}
loading={this.state.loading}  //设置loading属性
/>
当点击选择⼀页显⽰⼏条时，请求数据，重新渲染，所调⽤的函数：
toSelectchange(page,num) {
  $.ajax({
url: url,
type: "POST",
dataType: 'json',
cache:false,
data:{
  page: page,
  pagesize:num
},
success:function(data) {
  console.log(data);
  this.setState({
queryInfo : {
  pageSize: num
    },
    dataSource:{
      count: unt,
      data: data.data,
    }
  });
}.bind(this),
error:function(data) {
  console.log(data);
}.bind(this)
  });
}
同理，在点击页数和点击上⼀页下⼀页时，调⽤函数，函数与上边⼀样，只是请求的⽹址会不同。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。