项目场景：

基于electron + Vue + node.js + express + mysql + evanpatchouli-mysql + Ant-Design-Vue    
    
    
    
    
，编写一款属于自己的轻量级MySQL数据库界面工具    
    
    
    
    
。

问题列表

如何动态渲染高度自定义的Ant Design Table？ Ant Design Table 表头固定


     


     


     


     


 ，内部Popover意外遮挡

问题描述

问题1

作为一款数据库界面工具
 




 




 




 




 ，需要动态地获得数据库和表的信息   

   

   

   

   

，因此要渲染的表结构经常在变


     


     


     


     


 。

Ant Design Vue的官方手册给出的示例里 

     

     

     

     

，全部采用:datasource绑定数据源

  




  




  




  




  ，:columns绑定表结构  


  


  


  


  

，如果想自定义column的内容  
     
     
     
     
，就往标签内嵌插槽

以下是官方的template模板 <a-table :data-source="data"> <a-table-column key="age" title="Age" data-index="age" /> <a-table-column key="address" title="Address" data-index="address" /> <a-table-column key="tags" title="Tags" data-index="tags"> <template #default="{ text: tags }"> <span> <a-tag v-for="tag in tags" :key="tag">{{ tag }}</a-tag> </span> </template> </a-table-column> <a-table-column key="action" title="Action"> <template #default="{ record }"> <span> <a>Action 一 {{ record.firstName }}</a> <a-divider type="vertical" /> <a>Delete</a> </span> </template> </a-table-column> </a-table>

我复制了这个模板用到我的表格中


   




   




   




   




  ，并且自定义了一个悬浮触发的Popover 



 



 



 



 

，这就存在一个问题：模板里                       ，内写了自定义的



    




    




    




    




  ，表头是在column标签上绑定title





















，但title不支持像:title这样的动态绑定                        ，只能绑定一个死的字符串
 




 




 




 




 。

写死的表头并不符合我动态渲染不同表格的需求



     



     



     



     



  ，删掉写死的表头




















，则不会渲染表头；我尝试为<a-table>定义了columns    
    
    
    
    
，表头是有了


     


     


     


     


 ，但我自己写<a-table-column>又会被默认样式覆盖
 




 




 




 




 ，单纯的渲染了源数据   

   

   

   

   

。

原因分析：

无论有没有绑定:columns时   

   

   

   

   

，渲染规则是一定的 

     

     

     

     

。为此 

     

     

     

     

，我们需要弄清楚不同情况下参数的映射关系

  




  




  




  




  ，才能正确的渲染我们想要的效果

  




  




  




  




  。

解决方案1：

按照上面那个模板改：

不绑定columns  


  


  


  


  

，手写ant-table-column  
     
     
     
     
，v-for绑定表结构对column进行列表渲染


   




   




   




   




  ，并绑定:dataindex为字段名去拿到数据 



 



 



 



 

，内置两个插槽对应表头和内容                       ，#title和#default <a-table :dataSource="users" :pagination="{ pageSize: 9 }" :scroll="{ x: max-content, y: clientHeight }" > <a-table-column v-for="item in userStruct" :key="item.Field" :data-index="item.Field" @resizeColumn="handleResizeColumn" > <template #title ><span >{{ item.Field }}</span > </template> <template #default="{ text: content }"> <a-popover id="ziduanInfo" title="字段信息" placement="right" trigger="hover" :getPopupContainer=" (triggerNode) => { return triggerNode.parentNode; } " > <template #content> <p>类型: {{ item.Type }}</p> <p>键型: {{ item.Key }}</p> <p>非空: {{ item.Null }}</p> <p>字符集: {{ item.Collation }}</p> <p>默认值: {{ item.Default }}</p> <p>权限: {{ item.Privileges }}</p> <p>其他: {{ item.Extra }}</p> <p>描述: {{ item.Comment }}</p> </template> <span class="table-cell-content">{{ content }}</span> </a-popover> </template> </a-table-column> </a-table>

解决方案2：

不用官方给的这个示例



    




    




    




    




  ，换一种插槽的方式

不写ant-table-column





















，在ant-table上绑定columns

内置两个插槽对应表头和内容                        ，#headerCell和#bodyCell

内容依旧是用v-for进行渲染 <a-table :dataSource="users" :columns="columns"> <template #headerCell="{ column }"> <template v-if="column.key === id"> <span> <smile-outlined /> <a-button>{{ column.key }}</a-button> </span> </template> </template> <template #bodyCell="{ column, record }"> <template v-for＝"(item, index) in userConstruct" :key＝"index"> <a> <a-button>{{ record[index] }}</a-button> </a> </template> </template> </a-table>

问题2

我的应用做了响应式界面



     



     



     



     



  ，当electron窗口高度减小时




















，ant-table可见高度也随之减小    
    
    
    
    
，为此我设置了它的:scroll


     


     


     


     


 ，为其动态指定了一个监听窗口的变量作为高度（y）  


  


  


  


  

。

我使用问题一的方案一中的代码时
 




 




 




 




 ，当我的数据只有寥寥几条或者窗口很扁的时候   

   

   

   

   

，鼠标悬浮字段浮现的popover被限制在表可见高度内 

     

     

     

     

，无法完全显示  
     
     
     
     
。

为了解决这个问题

  




  




  




  




  ，我先尝试css穿透ant-table  


  


  


  


  

，设置overflow为visible  
     
     
     
     
，无效


   




   




   




   




  。又尝试将xss穿透popover


   




   




   




   




  ，设置其z-index为更高值 



 



 



 



 

，无效 



 



 



 



 

。

原因分析

ant-popover在渲染时                       ，默认是挂载到最大的父容器body上                       。在我复制下来的示例代码中



    




    




    




    




  ，指定了其挂载的容器为出发事件所在的容器-即ant-table





















，由于ant-table被我设置了高度                        ，popover若高度比表格更高



     



     



     



     



  ，溢出部分只能滑动父容器（ant-table）查看



    




    




    




    




  。

解决方案

删除ant-popover标签内绑定的挂载容器传值




















，或者为其指定一个合适的挂载容器





















。

题外话

这是我第一次使用ant-design    
    
    
    
    
，感觉上手不是很快


     


     


     


     


 ，还在学习中
 




 




 




 




 ，如有讲的不对的地方还请见谅                        。