文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么解决Element的穿梭框数据量大时点击全选卡顿问题

2023-06-25 11:36

关注

本篇内容介绍了“怎么解决Element的穿梭框数据量大时点击全选卡顿问题”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

现象:我们渲染了9999条数据,由于transfer组件会一次性渲染所有数据,所以一次性渲染这么多,卡个几十秒很正常好吧。所以懒加载或者分页是基本操作,方案二是分页操作。

懒加载的方式可以用EUI的无限滚动

即便我们做了懒加载之后,点击全选依旧是卡顿6秒以上,所以方案一解决的是:即便做了懒加载或者分页操作后,用户点击分页,依旧会卡顿几秒的情况。

这个是因为transfer的源码中‘全选判断'代码性能差的原因,方案一就是修改transfer的源码。

我提交了一个pr,地址是: hhttps://github.com/ElemeFE/element/pull/20282

怎么解决Element的穿梭框数据量大时点击全选卡顿问题

方案一:复制EUI的transfer组件,然后进行修改,再引入项目目录

EUI的transfer组件目录路径:node_modules\element-ui\packages\transfer,复制文件夹,然后放入vue项目路径的

怎么解决Element的穿梭框数据量大时点击全选卡顿问题

在调用EUI的transfer的地方引入公共的组件transfer,

<template>  <Transfer v-model="value" :data="data"></Transfer></template><script>import Transfer from '../common/transfer'export default {  components:{    Transfer:Transfer  }, //省略</script>

开始修改transfer代码:

打开src/common\transfer\src\transfer-panel.vue的组件,

找到updateAllChecked函数,updateAllChecked函数作用是:我们点击一个item就需要判断,看代码注释。

updateAllChecked() {            let start = new Date().getTime();      const checkableDataKeys = this.checkableData.map(        item => item[this.keyProp]      );      this.allChecked =        checkableDataKeys.length > 0 &&            checkableDataKeys.every(item => this.checked.indexOf(item) > -1);      console.log("updateAllCheckedEnd", new Date().getTime() - start);    },

来看源码的耗时:

怎么解决Element的穿梭框数据量大时点击全选卡顿问题

然后我们开始重写updateAllChecked函数:

updateAllChecked() {            let start = new Date().getTime();      let checkableDataKeys = this.checkableData.map((item) => {        let keyProps = {};        keyProps[item[this.keyProp]] = true;        return keyProps;      });      // 通过对象的k-v对应,n(1)的方式寻找数组中是否存在某元素      this.allChecked =        checkableDataKeys.length > 0 &&        this.checked.length > 0 &&        this.checked.every((item) => checkableDataKeys[item]);      // 上面被注释的源码是最耗时的,所有一直看耗时就可以了      console.log("updateAllCheckedEnd", new Date().getTime() - start);    },

这样性能就高好多了,其实就是基本的前端算法题,目测EUI的开发者是因为懒才不写的。

来看修改代码后的耗时:

怎么解决Element的穿梭框数据量大时点击全选卡顿问题

明显快多了。

接下来是文件:\src\common\transfer\src\main.vue,找到addToRight函数

addToRight() {      let currentValue = this.value.slice();      const itemsToBeMoved = [];      const key = this.props.key;      let start = new Date().getTime();      // 此处套了两层循环,耗时长      this.data.forEach((item) => {        const itemKey = item[key];        if (          this.leftChecked.indexOf(itemKey) > -1 &&          this.value.indexOf(itemKey) === -1        ) {          itemsToBeMoved.push(itemKey);        }      });      console.log("addToRightEnd", new Date().getTime() - start);      currentValue =        this.targetOrder === "unshift"          ? itemsToBeMoved.concat(currentValue)          : currentValue.concat(itemsToBeMoved);      this.$emit("input", currentValue);      this.$emit("change", currentValue, "right", this.leftChecked);    },

移动选中的耗时:

怎么解决Element的穿梭框数据量大时点击全选卡顿问题

修改addToRight函数,

addToRight() {      let start = new Date().getTime();      let currentValue = this.value.slice();      const itemsToBeMoved = [];      const key = this.props.key;      // 修改      let leftCheckedKeyPropsObj = {};      this.leftChecked.forEach((item, index) => {        leftCheckedKeyPropsObj[item] = true;      });      let valueKeyPropsObj = {};      this.value.forEach((item, index) => {        valueKeyPropsObj[item] = true;      });      this.data.forEach((item) => {        const itemKey = item[key];        if ( leftCheckedKeyPropsObj[itemKey] && !valueKeyPropsObj[itemKey] ) {          itemsToBeMoved.push(itemKey);        }      });      console.log("addToRightEnd", new Date().getTime() - start);      currentValue =        this.targetOrder === "unshift"          ? itemsToBeMoved.concat(currentValue)          : currentValue.concat(itemsToBeMoved);      this.$emit("input", currentValue);      this.$emit("change", currentValue, "right", this.leftChecked);    },

移动选中耗时:

怎么解决Element的穿梭框数据量大时点击全选卡顿问题

耗时明显减少了,这方案的前提就是懒加载或者分页,我试了一下10w的数据量,依旧是不错的。

方案二:分页操作

分析

checkBox-group有个check数组(用来记录已经选中的item数组)和renderItem数组(实际渲染的item,由于是分页,所有不会渲染所有),如果`check数组`中有`renderItem数组`的一项,那么该项就会被标记为已选,否则是未选。实现原理就是单纯的check数组和renderItem数组进行比较。

当用户点击全选的时候,check数组变成上万条数据的数组,此时我们渲染了100条数据,那么就要进行10000x100级别的循环,这就是耗时的原因所在。

其实,页面只渲染了100条数据,我们没必要将上万条数据一次性放入check数组中,我们只需要把这100条数组放入check数组,显示这100条数据为已选即可。当页面渲染了更多数据的同时,将新增的数据添加进check数组即可。这样性能大大提升。

方案

我采用的方案如下:

只显示100条数据。

下拉显示下100条数据,上拉显示上100条数据。

当下拉或者上拉增加渲染数据的同时,把新增数据添加进check数组。

这些只是大致思路,我已经实现了。还有很多细节要处理,想要完善,还得利用对象的键值对实现删除等。

“怎么解决Element的穿梭框数据量大时点击全选卡顿问题”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯