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

项目场景：

基于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">{{ 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
       
        >{{ 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，感觉上手不是很快，还在学习中，如有讲的不对的地方还请见谅。

标签 , ,

发表回复