el-table中 el-popover 性能优化

场景：在 el-table 中使用 el-popover ,出现了 loading 加载卡顿的问题，接口返回的数据的时间大概是 140ms ，所以不是接口慢的原因；通过对表中结构的逐步排查，发现是表中的 某一行 所影响的；并且 其中含有 el-popover；因为 el-popover 会渲染出真实的 dom 元素 所以在页面渲染的时候会出现el-table loading 卡顿的情况。

原来的代码是这样的

<ElTable v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" size="small"show-overflow-tooltip @row-dblclick="handleViewDetail" ref="tableRef":height="tableHeight" highlight-current-row @current-change="handleCurrentRowChange":row-class-name="tableRowClassName"@sort-change="sort_change":cell-style="rowClassName":row-style="{height: '30px'}":header-cell-style="headerClassName">
//...<el-table-column prop="remark" :label="$t('common.remark')" width="100"><template #default="scope"><el-popover :visible="scope.row.visible" placement="top" trigger="click" :width="204"><el-input v-model="scope.row.remark" style="width: 180px;":placeholder="$t('common.email.setBlockSize')"/><div style="text-align: right; margin: 16px 0 0 0;"><el-button size="small" text @click="() => {scope.row.visible = false;scope.row.remark = '';}">{{ $t('common.sss16') }}</el-button><el-button size="small" type="primary" @click="() => {scope.row.visible = false;setRemark(scope.row.mailId, scope.row.remark)}">{{ $t('common.confirm') }}</el-button></div><template #reference><el-icon @click="scope.row.visible = true" :color="scope.row.remark ? '#40a9ff' : '#dddddd'"><el-tooltipv-if="scope.row.remark"class="box-item":content="scope.row.remark"placement="right"><Memo/></el-tooltip><Memo v-else/></el-icon></template></el-popover></template></el-table-column>//...
</ElTable>

解决办法：因为每次都要渲染真实dom；所以可以将 el-popover 抽离 就像 el-dialog 一样；只不过这里有特别的地方是——每行的数据都是不一样的，还需要动态展示每行的数据。

<el-table-column prop="remark" :label="$t('common.remark')" width="100"><template #default="scope"><el-icon :ref="(el) => (refMap[`${scope.row.id}`] = el)"@click="handleRef(refMap[`${scope.row.id}`], scope.row)":color="scope.row.remark ? '#40a9ff' : '#dddddd'"><el-tooltipv-if="emailListCheckoutTarget.remark"class="box-item":content="emailListCheckoutTarget.remark"placement="right"><Memo/></el-tooltip><Memo v-else/></el-icon></template></el-table-column>

抽离的 el-popover

      <el-popovervirtual-triggering:virtual-ref="tempRef"v-model:visible="visiblePopover"placement="top":width="204"trigger="click":popper-options="{modifiers: [{name: 'offset',options: {offset: [8, 8]}}]}"><el-input v-model="emailListCheckoutTarget.remark" style="width: 180px;":placeholder="$t('common.email.setBlockSize')" @keydown.enter.native.stop="okPopover"/><div style="text-align: right; margin: 16px 0 0 0;"><el-button size="small" text @click.stop="cancelPopover">{{ $t('common.sss16') }}</el-button><el-button size="small" type="primary" @click.stop="okPopover">{{ $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 左右。