antd表格和分页组件的使用+动态调整表格纵向滚定距离

✅ 作者 : 布克吉

🍎简介 : 专注于前端开发，微信小程序，后台管理（Vue+React）

               本博客主要用于分享前端技术知识，更多内容请看下方👇

✨人生态度 ：☀️Eventually everything will be fine！☀️

我们在做表格展示数据时，条数多的时候，可能会需要滚动条和分页。

1.分页的使用

1.1 配合后端分页

请求数据时，一次只获取一页的数据

参数：offset(起始索引)+pageSize(每页数据数量)+其它参数

接收数据中，包含数据总条数total（用于计算当前需要分的页数)+当前页的数据

1.2 前端自处理分页

一次性请求并接收所有数据，使用分页组件分页展示。如图

以下为参考代码

class TablePage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			//分页配置初始化
			dataSource:[],
			dataList:[],
			pagination:{
				current: 1,
				pageSize: 10,
				total: 0,
				pageSizeOptions: [10, 20, 50, 100, 200],
				showSizeChanger: true
			}
		}
	}
	
	getData = ()=>{
		// ....请求数据代码 
        // rv为返回数据
		this.setState(state=>({
			dataSource:rv.array,
			pagination:{
				...state.pagination,
				total:rv.total||rv.array.length
			}
		}))
		//....处理数据代码
	}

	onPageChange = (page,pageSize)=>{
		console.log(page,pageSize);
		let _state = this.state
		this.setState({
			pagination: {
				..._state.pagination,
				current: page,
				pageSize: pageSize
			}
		}, () => {
			//切换分页时 获取当前页数据
			this.getData();
		});
		
		/* //一次性获取数据，在前端的分页
		 let _state = this.state
		 let newArr = this.state.AuthUserDevData.slice((page-1)*pageSize,(page-1)*pageSize+pageSize)
		 this.setState({
			 pagination: {
				 ..._state.pagination,
				 current: page,
				 pageSize: pageSize
			 },
			AuthUserDevList:newArr
		 });
		 */
	}

	render(){
		const columns = [
			{ title: '序号',align:"center",width:100, render: (text, record, index) => `${(pagination.current-1)*pagination.pageSize+index+1}`}]
		return(
			<Table dataSource={dataSource} columns={columns} className="myTable"
			  pagination={false}  scroll={{y: 540}} style={{height:'600px'}}/>
			<Pagination { ...pagination }  onChange={ this.onPageChange }  style={{textAlign:'right'}} />
		)
	}
}

2.动态调整表格纵向滚定距离

多数情况下，我们不希望整个窗口滚动，而是表格内容。这里就必须要用到table的scroll属性。

例如上述代码中，scroll={ y:540 }，问题在于，当窗口的高度发生变化时，如何动态调整这个纵向滚定距离呢！（更多使用可替换下方代码dom元素的类名）

/**
 * 获取第一个表格的可视化高度
 * @param {*} extraHeight 额外的高度(表格底部的内容高度 Number类型,默认为74) 
 * @param {*} id 当前页面中有多个table时需要制定table的id
 */
export function getTableScroll({ extraHeight, id }) {
  if (typeof extraHeight == "undefined") {
    //  默认底部分页64 + 边距10
    extraHeight = 74
  }
  let tHeader = null
  if (id) {
    tHeader = document.getElementById(id) ? document.getElementById(id).getElementsByClassName("ant-table-thead")[0] : null
  } else {
    tHeader = document.getElementsByClassName("ant-table-thead")[0]
  }
  //表格内容距离顶部的距离
  let tHeaderBottom = 0
  if (tHeader) {
    tHeaderBottom = tHeader.getBoundingClientRect().bottom
  }
  //窗体高度-表格内容顶部的高度-表格内容底部的高度
  // let height = document.body.clientHeight - tHeaderBottom - extraHeight
  let height = `calc(100vh - ${tHeaderBottom + extraHeight}px)`
  return height
}

返回的height，即为计算出的滚动高度

详情参考文章：https://www.cnblogs.com/ITCoNan/p/14306979.html