Ant Transfer 数据量过多浏览器卡死问题解决

修改antd/lib/tansfer/list.js,修改其showItems函数,在itme到达指定数目时不再显示剩余的其他Item。

1、定义一个全局的count函数

2、增加如下代码到showItems(旧版antd)或getFilteredItems(新版antd)函数中

if(count < 150){
    count = count + 1;
    } else{
return null;
}

3、修改后完整代码如下

(旧版本antd)

var count = 0;
            var showItems = dataSource.map(function (item) {


                var _renderItem = _this3.renderItem(item),
                    renderedText = _renderItem.renderedText,
                    renderedEl = _renderItem.renderedEl;


                if (filter && filter.trim() && !_this3.matchFilter(renderedText, item)) {
                    return null;
                }
                // all show items
                totalDataSource.push(item);
 
                if (!item.disabled) {
                    // response to checkAll items
                    filteredDataSource.push(item);
                }
if(count < 150){
    count = count + 1;
    } else{
return null;
}
                var checked = checkedKeys.indexOf(item.key) >= 0;
                return _react2['default'].createElement(_item2['default'], { key: item.key, item: item, lazy: lazy, renderedText: renderedText, renderedEl: renderedEl, checked: checked, prefixCls: prefixCls, onClick: _this3.handleSelect });
            });

(新版本antd)

 var count = 0;
      dataSource.forEach(function (item) {
        var renderedItem = _this2.renderItem(item);

        var renderedText = renderedItem.renderedText; // Filter skip

        if (filterValue && filterValue.trim() && !_this2.matchFilter(renderedText, item)) {
          return null;
        }
        filteredItems.push(item);
        if(count < 150){
          count = count + 1;
          } else{
      return null; 
      }
        filteredRenderItems.push(renderedItem);
      });

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FREELANCER__

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值