北京市住房和城乡建设部网站首页,数字货币众筹网站开发,夜间正能量网站入口免费下载,企业网站建设文章场景#xff1a;在 el-table 中使用 el-popover ,出现了 loading 加载卡顿的问题#xff0c;接口返回的数据的时间大概是 140ms #xff0c;所以不是接口慢的原因#xff1b;通过对表中结构的逐步排查#xff0c;发现是表中的 某一行 所影响的#xff1b;并且 其中含有 e…场景在 el-table 中使用 el-popover ,出现了 loading 加载卡顿的问题接口返回的数据的时间大概是 140ms 所以不是接口慢的原因通过对表中结构的逐步排查发现是表中的 某一行 所影响的并且 其中含有 el-popover因为 el-popover 会渲染出真实的 dom 元素 所以在页面渲染的时候会出现el-table loading 卡顿的情况。
原来的代码是这样的
ElTable v-loadingloading :datatableData selection-changehandleSelectionChange sizesmallshow-overflow-tooltip row-dblclickhandleViewDetail reftableRef:heighttableHeight highlight-current-row current-changehandleCurrentRowChange:row-class-nametableRowClassNamesort-changesort_change:cell-stylerowClassName:row-style{height: 30px}:header-cell-styleheaderClassName
//...el-table-column propremark :label$t(common.remark) width100template #defaultscopeel-popover :visiblescope.row.visible placementtop triggerclick :width204el-input v-modelscope.row.remark stylewidth: 180px;:placeholder$t(common.email.setBlockSize)/div styletext-align: right; margin: 16px 0 0 0;el-button sizesmall text click() {scope.row.visible false;scope.row.remark ;}{{ $t(common.sss16) }}/el-buttonel-button sizesmall typeprimary click() {scope.row.visible false;setRemark(scope.row.mailId, scope.row.remark)}{{ $t(common.confirm) }}/el-button/divtemplate #referenceel-icon clickscope.row.visible true :colorscope.row.remark ? #40a9ff : #ddddddel-tooltipv-ifscope.row.remarkclassbox-item:contentscope.row.remarkplacementrightMemo//el-tooltipMemo v-else//el-icon/template/el-popover/template/el-table-column//...
/ElTable解决办法因为每次都要渲染真实dom所以可以将 el-popover 抽离 就像 el-dialog 一样只不过这里有特别的地方是——每行的数据都是不一样的还需要动态展示每行的数据。
el-table-column propremark :label$t(common.remark) width100template #defaultscopeel-icon :ref(el) (refMap[${scope.row.id}] el)clickhandleRef(refMap[${scope.row.id}], scope.row):colorscope.row.remark ? #40a9ff : #ddddddel-tooltipv-ifemailListCheckoutTarget.remarkclassbox-item:contentemailListCheckoutTarget.remarkplacementrightMemo//el-tooltipMemo v-else//el-icon/template/el-table-column抽离的 el-popover el-popovervirtual-triggering:virtual-reftempRefv-model:visiblevisiblePopoverplacementtop:width204triggerclick:popper-options{modifiers: [{name: offset,options: {offset: [8, 8]}}]}el-input v-modelemailListCheckoutTarget.remark stylewidth: 180px;:placeholder$t(common.email.setBlockSize) keydown.enter.native.stopokPopover/div styletext-align: right; margin: 16px 0 0 0;el-button sizesmall text click.stopcancelPopover{{ $t(common.sss16) }}/el-buttonel-button sizesmall typeprimary click.stopokPopover{{ $t(common.confirm) }}/el-button/div/el-popover最重要的一点是采用这种方式会出现 重复点击该列的目标对象的时候会出现 visiblePopover 和 trigger 不同步的问题表现为 el-popover 闪烁一次所以需要在用户点击的时候重置 el-popover的显隐状态 //真实dom数组const refMap ref([])//目标dom对象const tempRef ref(null)//控制 el-popover 的显隐状态const visiblePopover ref(false)//选中的行数据const emailListCheckoutTarget ref({})//触发方法const handleRef (ref, item, type) {tempRef.value ref//重置 el-popover 显隐状态visiblePopover.value false;setTimeout(() {visiblePopover.value true;}, 200)emailListCheckoutTarget.value item;localStorage.setItem(targetItem, JSON.stringify(item.remark))}其次还要考虑到什么时候渲染指定的行内容使用 鼠标 移入、移出 事件 // 这里是开始点const mouseEnters throttle((row) {//localStorage.getItem(targetItem) 这里是特殊处理可以根据实际情况处理if (localStorage.getItem(targetItem) ! row.remark) {visiblePopover.value false}if (emailListCheckoutTarget.value.remark ! ) {emailListCheckoutTarget.value row;}}, 300)const mouseLeaves throttle((row) {if (localStorage.getItem(targetItem) row.remark) {// 防止popover 消失visiblePopover.value false;}}, 300)这是两个方法提交数据取消提交 const cancelPopover () {visiblePopover.value false;emailListCheckoutTarget.value.remark }const okPopover () {//这是提交到后端setRemark(emailListCheckoutTarget.value.id, emailListCheckoutTarget.value.remark)emailListCheckoutTarget.value {};visiblePopover.value false;}经过上面的一顿操作后肉眼可见的速度提高了大约优化了 0.5s 左右。
