教你如何解决el-table嵌套el-popover处理卡顿问题

共计 1233 个字符，预计需要花费 4 分钟才能阅读完成。

一个常见的场景是在表格行内以 el-popover 的形式对行内信息进行一些业务操作。在表格分页 10 条、20 条的情况下页面运行良好，但是在分页 400 条的时候会出现肉眼可见的卡顿。原因是表格渲染的 popover 组件太多了，一行如果至少 3 个 popover 组件，那么 400 行至少就得渲染 1200 个了。下面就是导致卡顿的通常写法：

 通过
      
      
        查看日志 

el-popover 提供了一个虚拟触发的功能，可以将触发内容和下拉内容分开，那这样就可以只用一个 popover 组件去涵盖所有需要用到的场景。像这个例子：

(refMap[item.clause] = el)"@click="handleRef(refMap[item.clause], item, -1)"
            >
              
            
          
        
      
    
    
      
        
           (refMap[row.commentId] = ref)"@click="handleRef(refMap[row.commentId], row, 0)"
          >
            
          
        
      
    
    
      
        
           (refMap[`${row.commentId}Check`] = ref)">
            
          
        
      
    
  
  
    
      
    
    
      
    
    
      
    
  


const emotions = [{ desc: '好评', icon: 'icon-xiaolian'},
    {desc: '中评', icon: 'icon-wubiaoqing'},
    {desc: '差评', icon: 'icon-kulian'}
]
const refMap = ref()
const tempRef = ref()
const visiblePopover = ref(false)
// -1- 字句审核 0- 整句审核 1- 日志查看
const popoverType = ref(0)
const popoverWidth = computed(() => { [-1]: 80, [0]: 150, [1]: 90 }[popoverType.value])
const handleRef = (ref, item, type) => {
  tempRef.value = ref
  popoverType.value = type
  if (~type) {// ... 业务逻辑 1} else {// ... 业务逻辑 2、3}
  visiblePopover.value = true
}


.trigger {display: contents;}

现在，在这个例子中：

到此这篇关于 el-table 嵌套 el-popover 处理卡顿的解决的文章就介绍到这了。

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券