antdesign中table的行元素合并 antd table

admin2024-05-30  20

今天刚刚运用antd做了个分页,根据官网上的指导和一些自己的摸索,将其完成,有些代码编写的还是比较繁琐,没有做简化。

antd官网讲的还是比较详细的,有案例,本例在其基础上扩展了一下功能,现将其按照例子的方式记录下来,以供以后参考。

 

先将显示出来的效果放出来(注:本次案例是点击一次页码请求一页数据):

antdesign中table的行元素合并 antd table,antdesign中table的行元素合并 antd table_数据,第1张

 

编码过程大体需要以下几步:

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: data.count,
		            data: data.data,
			    page: 1
		        },
		});
      }.bind(this))

开始引用Table组件:

<Table 
	columns={self.tableColumns} //th菜单项
	rowKey={record => record.registered}
	dataSource={this.state.dataSource.data} //数据
	pagination={{  //分页
		total: this.state.dataSource.count, //数据总数量
		pageSize: this.state.queryInfo.pageSize,  //显示几条一页
		defaultPageSize: this.state.queryInfo.pageSize, //默认显示几条一页
		showSizeChanger: true,  //是否显示可以设置几条一页的选项
		onShowSizeChange(current, pageSize) {  //当几条一页的值改变后调用函数,current:改变显示条数时当前数据所在页;pageSize:改变后的一页显示条数
		  self.toSelectchange(current, pageSize); //这边已经设置了self = this
		},
		onChange(current) {  //点击改变页数的选项时调用函数,current:将要跳转的页数
			self.gotoThispage(current, self.state.queryInfo.pageSize);
		},								            
  		showTotal: function () {  //设置显示一共几条数据
			return '共 ' + this.state.dataSource.count + ' 条数据';  
		}
	}}
	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: data.count,
	      data: data.data,
	    }
	  });
	}.bind(this),
	error:function(data) {
	  console.log(data);
	}.bind(this)
  });		
}

同理,在点击页数和点击上一页下一页时,调用函数,函数与上边一样,只是请求的网址会不同。

 



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!