Ant Design Table 如何动态自定义？Ant Popover 遮挡？
项目场景：
基于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>
以下是官方的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，感觉上手不是很快，还在学习中，如有讲的不对的地方还请见谅。
Ant Design Table 如何动态自定义？Ant Popover 遮挡？的更多相关文章
- ant design Table合并单元格合并单元格怎么用？
1.ant design table合并单元格怎么用?
- 2017.11.6 - ant design table等组件的使用，以及 chrome 中 network 的使用
一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点. 二.难点 1. 项目技术选取: ant design. ...
- ant design table column 设置width不生效解决方案
当td里的内容超出了width的范围时,会出现width不固定,也就是width不生效 解决方案: 设置scroll的width等于所有列宽之和(scroll={{x: 100%}})
- ant design table td 文字显示过长添加省略号、ant 文字过长时添加tootip提示
方法1: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit ...
- ant design pro（二）布局
一.概述 参看地址://pro.ant.design/docs/layout-cn 其实在上述地址ant-design上已经有详细介绍,本文知识简述概要. 页面整体布局是一个产品最外层的框 ...
- Vue.js高效前端开发 • 【Ant Design of Vue双色球129期开奖结果
基础】
全部章节 >>>> 文章目录 一.Ant Design of Vue双色球129期开奖结果 1.Ant Design介绍 2.Ant Design of Vue安装 3.Ant Design o ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- ant design pro （七）和服务端进行交互
一.概述 原文地址://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟 ...
- ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...
- React组件库Ant Design的安装与使用
一.什么是 Ant Design 1.Ant Design 提炼自企业级中后台产品的交互语言和视觉风格 2.Ant Design 使用 TypeScript 构建,提供完整的类型定义文件 二.Ant ...
随机推荐
- 8.pygame-定时器
使用定时器添加敌机 游戏启动后,每隔一秒出现一架敌方飞机 每架飞机向屏幕下方飞行,速度各不相同 没加敌机出现的水平位置也不进相同 当敌机从屏幕下方飞出,不会再飞回到屏幕中 定时器 pygame中使 ...
- 闻道Go语言，6月龄必知必会
大家好,我是马甲哥, 学习新知识, 我的策略是模仿-->归纳--->举一反三, 在同程倒腾Go语言一年有余,本次记录<闻道Go语言,6月龄必知必会>,形式是同我的主力语言C#做 ...
- Java 编码那些事(二)
建议先阅读:Java 编码那些事(一) 现在说说编码在Java中的实际运用.在使用tomcat的时候,绝大部分同学都会遇到乱码的问题,查查文档,google一下解决方案啥的,都是设置这里,设置那里,或 ...
- beego学习———安装bee
Bee安装 有各种坑,一会儿GOPATH的问题,一会儿局部的问题了 唉,搞了一个小时 很重要的问题!!!!!!!!!!!! beego的bee工具只能强制新建项目在GOPATH/src目录下 虽然在别 ...
- Spring三级缓存解决循环依赖
前提知识 1.解决循环依赖的核心依据:实例化和初始化步骤是分开执行的 2.实现方式:三级缓存 3.lambda表达式的延迟执行特性 spring源码执行逻辑 核心方法refresh(), popula ...
- day14-HTTP01
HTTP协议 1.什么是HTTP协议? 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用广泛的一种网络协议.是工作在tcp/ip协议基础上的,所有的ww ...
- CAN总线数据链路层（一）
1.通信机制 发送报文. 1.首先检测Bus状态,空闲 则发送 报文且回读 2.线与机制,若有两个节点同时发报文 报文结构: 通过ID进行仲裁(规则 ...
- 5、有一行电文，译码规律为： a ——> z b——> y c ——> x. 即把第一个字母变成第26个字母， 第i个字母变成第（26-i+1）个字母， 非字母字符不变
/* 有一行电文,译码规律为: a --> z b--> y c --> x. 即把第一个字母变成第26个字母, 第i个字母变成第(26-i+1)个字母, 非字母字符不变 */ #i ...
- MySQL JDBC驱动版本与数据库版本的对应关系及注意事项
MySQL JDBC驱动版本与数据库版本的对应关系及注意事项 事情发生 学了三遍的servlet,经典老师又教的第一万遍登陆注册,并且让实现,并且让演示,我们老师可能和之前的小学期公司老师 完全没有沟 ...
- mysql安装及访问配置
安装教程参考://www.cnblogs.com/hjw-zq/p/8809227.html 下载地址://dev.mysql.com/downloads/mysql/ 例:h ...