首页 > 其他 > 详细

antd 给select下拉框添加懒加载

时间:2020-01-08 21:48:05      阅读:1389      评论:0      收藏:0      [点我收藏+]

 

 

给select下拉框添加属性

dropdownRender={menu => (
                                <div>
                                  {menu}
                                  <div
                                    className="selectScroll"
                                    style={{ textAlign: ‘center‘ }}
                                    onMouseDown={e => e.preventDefault()}
                                  >
                                    {
                                      selectLoading && // 加载状态
                                        <Spin size="small" style={{ padding: ‘8px‘ }} />
                                    }
                                  </div>
                                </div>
                              )}
onFocus:
const index = document.getElementsByClassName(‘selectScroll‘).length;
      for (let i = 0; i < index; i++) {
        const node = document.getElementsByClassName(‘selectScroll‘)[i].previousElementSibling.children[0];
        node.onscroll = (e) => {
          const { pageTotal, selectLoading } = this.state; // 数据总条数,加载状态
          const { clientHeight, scrollHeight, scrollTop } = e.target;
          if ((clientHeight + scrollTop === scrollHeight) && !selectLoading) {
            this.setState({
              selectCurPage: this.state.selectCurPage + 1, // 页数加一
            }, () => {
              if (Math.ceil(pageTotal / 15) >= this.state.selectCurPage) { // 懒加载一次加载15条数据
                // 这里通过接口去获取数据
              }
            });
          }
        };
      }

antd 给select下拉框添加懒加载

原文:https://www.cnblogs.com/hamili/p/12168283.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!