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);
      });

你可能感兴趣的:(nodejs)