LayUI的select组件Option的1万多个,选择的时候缓慢问题
- Debug
- 42分钟前
- 9热度
- 0评论
问题:
现在项目需要LayUI的Select组件加载1万多条,然后用户输入后自动和筛选后选中的时候浏览器卡死
解决方法:
开始以为是数据量大的问题,结果发现是因为在form.on('selectid',function(data){})中需要获取选中的options的选项的自定义属性时候缓慢导致的,于是搜索到一篇文章可以不用,find方式获取选中的值提高效率,代码如下:
//select
form.on('select(Client_ID)', function (data) {
//var d = $("#Client_ID").find("option:selected"); //过去用这种方式,浏览器遍历options过多导致卡死
var e = data.elem;
console.log("选中的数据:" + data.elem);
var text = e[e.selectedIndex].text;
var index = e.selectedIndex;
//获取自定义属性
var code = e[e.selectedIndex].dataset.code;
console.log(text);
console.log(code);
//var name = $(d).html();
//var code = $(d).attr("data-code");
mulan.setData('Client_ID', data.value);
mulan.setData('Client', text);
mulan.setData('ClientCode', code);
});
这种效率大于 $("#Client_ID").find("option:selected"); 的效率,浏览器不再卡死了