滚动加载场景中
This commit is contained in:
parent
df4f0ceaf1
commit
ae5663630f
|
@ -1207,6 +1207,9 @@ var Table = function (_Component) {
|
|||
if (bodyTable && e.target !== bodyTable) {
|
||||
bodyTable.scrollTop = e.target.scrollTop;
|
||||
}
|
||||
if (this.hoverDom) {
|
||||
this.hoverDom.style.display = 'none';
|
||||
}
|
||||
this.lastScrollTop = e.target.scrollTop;
|
||||
if (handleScrollY) {
|
||||
(0, _utils.debounce)(handleScrollY(this.lastScrollTop, this.treeType), 300);
|
||||
|
@ -1236,7 +1239,12 @@ var Table = function (_Component) {
|
|||
this.currentHoverKey = key;
|
||||
var td = (0, _utils.closest)(event.target, 'td');
|
||||
if (td) {
|
||||
this.hoverDom.style.top = td.offsetTop + 'px';
|
||||
var scrollTop = this.lastScrollTop ? this.lastScrollTop : 0;
|
||||
var top = td.offsetTop - scrollTop;
|
||||
if (this.refs.headTable) {
|
||||
top = top + this.refs.headTable.clientHeight;
|
||||
}
|
||||
this.hoverDom.style.top = top + 'px';
|
||||
this.hoverDom.style.height = td.offsetHeight + 'px';
|
||||
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
|
||||
this.hoverDom.style.display = 'block';
|
||||
|
|
|
@ -87,6 +87,9 @@ function bigData(Table) {
|
|||
}
|
||||
if (nextProps.data !== props.data) {
|
||||
_this.computeCachedRowParentIndex(nextProps.data);
|
||||
if (nextProps.data.length > 0 && _this.endIndex < 1) {
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
|
||||
}
|
||||
}
|
||||
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
||||
if (currentIndex !== -1 && currentIndex !== this.currentIndex) {
|
||||
|
|
|
@ -62,7 +62,7 @@ const columns = [
|
|||
}
|
||||
];
|
||||
|
||||
const data = [ ...new Array(10000) ].map((e, i) => {
|
||||
const data = [ ...new Array(20) ].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if(i%3==0){
|
||||
rs.b = '女';
|
||||
|
@ -80,9 +80,18 @@ class Demo30 extends Component {
|
|||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
add=()=>{
|
||||
let {data} = this.state;
|
||||
const len =data.length;
|
||||
data.push({a: len + 'a', b: len+ 'b', c: len + 'c', d: len + 'd', key: len });
|
||||
this.setState({
|
||||
data
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={this.add}>new</button>
|
||||
<BigDataTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
|
@ -92,7 +101,7 @@ class Demo30 extends Component {
|
|||
console.log('currentIndex--'+index);
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
15
src/Table.js
15
src/Table.js
|
@ -1046,12 +1046,16 @@ class Table extends Component {
|
|||
if (bodyTable && e.target !== bodyTable) {
|
||||
bodyTable.scrollTop = e.target.scrollTop;
|
||||
}
|
||||
if(this.hoverDom){
|
||||
this.hoverDom.style.display = 'none'
|
||||
}
|
||||
this.lastScrollTop = e.target.scrollTop;
|
||||
if(handleScrollY){
|
||||
debounce(
|
||||
handleScrollY(this.lastScrollTop,this.treeType),
|
||||
300)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Remember last scrollLeft for scroll direction detecting.
|
||||
|
@ -1073,9 +1077,14 @@ class Table extends Component {
|
|||
this.currentHoverKey = key;
|
||||
const td = closest(event.target,'td');
|
||||
if(td){
|
||||
this.hoverDom.style.top = td.offsetTop+'px';
|
||||
this.hoverDom.style.height = td.offsetHeight +'px';
|
||||
this.hoverDom.style.lineHeight = td.offsetHeight +'px';
|
||||
const scrollTop = this.lastScrollTop ?this.lastScrollTop:0
|
||||
let top = td.offsetTop - scrollTop;
|
||||
if(this.refs.headTable){
|
||||
top = top + this.refs.headTable.clientHeight;
|
||||
}
|
||||
this.hoverDom.style.top = top + 'px';
|
||||
this.hoverDom.style.height = td.offsetHeight + 'px';
|
||||
this.hoverDom.style.lineHeight = td.offsetHeight + 'px';
|
||||
this.hoverDom.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
|
|
@ -57,17 +57,21 @@ export default function bigData(Table) {
|
|||
_this.currentIndex = 0;
|
||||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
|
||||
if(_this.endIndex > dataLen){
|
||||
_this.endIndex = dataLen;
|
||||
}
|
||||
|
||||
}
|
||||
if (nextProps.data !== props.data) {
|
||||
_this.computeCachedRowParentIndex(nextProps.data);
|
||||
if(nextProps.data.length>0){
|
||||
_this.endIndex = _this.startIndex + _this.loadCount; //数据结束位置
|
||||
}
|
||||
}
|
||||
//如果传currentIndex,会判断该条数据是否在可视区域,如果没有的话,则重新计算startIndex和endIndex
|
||||
if(currentIndex!==-1 && currentIndex !== this.currentIndex){
|
||||
_this.setStartAndEndIndex(currentIndex,dataLen);
|
||||
}
|
||||
if(_this.endIndex > dataLen){
|
||||
_this.endIndex = dataLen;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
Loading…
Reference in New Issue