Ant Design Table 如何动态自定义?Ant Popover 遮挡?

  • Ant Design Table 如何动态自定义?Ant Popover 遮挡?已关闭评论
  • 21 次浏览
  • A+
所属分类:Web前端
摘要

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


项目场景:

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


问题列表

  1. 如何动态渲染高度自定义的Ant Design Table?
  2. Ant Design Table 表头固定,内部Popover意外遮挡

问题描述

问题1

       作为一款数据库界面工具,需要动态地获得数据库和表的信息,因此要渲染的表结构经常在变。
       Ant Design Vue的官方手册给出的示例里,全部采用:datasource绑定数据源,:columns绑定表结构,如果想自定义column的内容,就往标签内嵌插槽<template>
       以下是官方的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" color="blue">{{ 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,这就存在一个问题:模板里,<a-table>内写了自定义的<a-table-column>,表头是在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         style="           background: var(--text-backcolor);           color: var(--most-backlolor);         "         >{{ 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,感觉上手不是很快,还在学习中,如有讲的不对的地方还请见谅。