You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.5 KiB
80 lines
2.5 KiB
/*
|
|
* @Description:
|
|
* @Author: tangjiang
|
|
* @Github:
|
|
* @Date: 2020-01-14 13:39:12
|
|
* @LastEditors : tangjiang
|
|
* @LastEditTime : 2020-01-14 16:30:05
|
|
*/
|
|
import './index.scss';
|
|
import React, { useRef, useState, useEffect } from 'react';
|
|
import { Table } from 'antd';
|
|
import ReactDom from 'react-dom';
|
|
|
|
const DisplayTableData = (props) => {
|
|
const {columns, datas, fetchData, total} = props;
|
|
let tableEl = useRef(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const renderFooter = (obj = {}) => {
|
|
const {course_count, student_count, choice_shixun_num, choice_shixun_frequency, total} = obj;
|
|
if (!obj) return ''
|
|
else {
|
|
return (
|
|
<ul className="footer_list">
|
|
<li className="footer_item footer-total">总计</li>
|
|
<li className="footer_name">{total || '-'}</li>
|
|
<li className="footer_item">{course_count || '-'}</li>
|
|
<li className="footer_item">{student_count || '-'}</li>
|
|
<li className="footer_item">{choice_shixun_num || '-'}</li>
|
|
<li className="footer_item">{choice_shixun_frequency || '-'}</li>
|
|
</ul>
|
|
)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const table = ReactDom.findDOMNode(tableEl);
|
|
// console.log(table);
|
|
const tableBody = table.querySelector('.ant-table-body');
|
|
let _scrollTop = 0;//保存上次滚动距离
|
|
let isRun = false;//是否执行查询
|
|
tableBody.addEventListener('scroll', () => {
|
|
if(tableBody.scrollTop === 0 ){
|
|
_scrollTop = 0;
|
|
}
|
|
// 上一次滚动高度与当前滚动高度不同则是纵向滚动
|
|
if (_scrollTop !== tableBody.scrollTop) {
|
|
//是否滑动到距离底部40px的位置
|
|
const scorll = _scrollTop >= tableBody.scrollHeight-tableBody.clientHeight-40;
|
|
//isRun为true时 代表已经执行查询
|
|
if(isRun && scorll){
|
|
return;
|
|
}
|
|
//_scrollTop < tableBody.scrollTop 判断是否向下滑动
|
|
isRun = _scrollTop < tableBody.scrollTop && scorll;
|
|
//保存当前滚动位置
|
|
_scrollTop = tableBody.scrollTop;
|
|
if (isRun) {
|
|
fetchData && fetchData();
|
|
}
|
|
}
|
|
})
|
|
}, []);
|
|
|
|
return (
|
|
<Table
|
|
className='static_table'
|
|
rowKey={record => record.id}
|
|
columns={columns}
|
|
dataSource={datas}
|
|
pagination={false}
|
|
loading={loading}
|
|
scroll={{y: 500}}
|
|
ref={(ref)=>tableEl=ref}
|
|
footer={total ? () => renderFooter(total) : ''}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default DisplayTableData; |