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

本文转载于网络 如有侵权请联系删除

相关文章

  • Windows pip upgrade 报错 No module named 'pip'

    windws10下升级pip,升级时下载安装包,卸载原有pip成功,在安装新pip包时因种种原因安装失败会导致pip被卸载,本文记录修复方法。 常见原因Windows中anaconda文件夹没有为users用户开放全部控制权限在更新pip时命令为(这是错误的命令):pipinstall-Upip复制此时pip从服务器下载了最新的pip安装包,卸载了原来的pip,但是没有权限安装新的pip 导致使用此命令更新pip后无pip可用 正确命令shell在选项中加入--userpipinstall--upgradepip--user复制修复命令如果不慎中招,可以使用如下命令恢复python-mensurepip python-mpipinstall--upgradepip复制实际效果$piplist Traceback(mostrecentcalllast): File"e:\program_files\annoconda\lib\runpy.py",line193,in_run_module_as_main "__main__",mod_spec) F

  • Spring复杂的BeanFactory继承体系该如何理解?---中下

    Spring复杂的BeanFactory继承体系该如何理解?---中下SpringIoC容器ApplicationContext统一资源加载策略Spring中的ResourceResourceLoader,“更广义的URL”1.可用的ResourceLoader2.ResourcePatternResolver——批量查找的ResourceLoader3.回顾与展望ApplicationContext与ResourceLoader1.扮演ResourceLoader的角色2.ResourceLoader类型的注入3.Resource类型的注入4.在特定情况下,ApplicationContext的Resource加载行为SpringIoC容器ApplicationContext作为Spring提供的较之BeanFactory更为先进的IoC容器实现,ApplicationContext除了拥有BeanFactory支持的所有功能之外,还进一步扩展了基本容器的功能,包括BeanFactoryPostProcessor、BeanPostProcessor以及其他特殊类型bean的自动识别、

  • Android实现在ServiceManager中加入自定义服务的方法详解

    本文实例讲述了Android实现在ServiceManager中加入自定义服务的方法。分享给大家供大家参考,具体如下:当我们要使用android的系统服务时,一般都是使用Context.getSystemService方法。例如我们要获取AudioManager,我们可以:AudioManageram=(AudioManager)getSystemService(Context.AUDIO_SERVICE);复制获取的服务,其实是在ServiceManager中注册的Binder服务,然后进行封装后,提供给用户。可以看ContextImpl.java中的实现:static{ ...... //将AudioManager加入SYSTEM_SERVICE_MAP中,调用getSystemService时, //就会从SYSTEM_SERVICE_MAP得到AudioManager registerService(AUDIO_SERVICE,newServiceFetcher(){ publicObjectcreateService(ContextImplctx){ returnnewAud

  • 微软是如何做 Code Review 的

    作者|Dr.MichaelaGreiler翻译|漫慢忙本文翻译自Dr.MichaelaGreiler的HowCodeReviewsworkatMicrosoft,作者所在的团队调研了微软是如何做代码审查的,并做了相关的总结。原文附有大量链接资源,在此没有整理出来,相关链接可以查看原文获取您是否曾经想过全球最大的软件公司之一是如何通过代码审查来确保高质量代码?我也是。因此,我与同事一起调查了Microsoft是如何进行代码审查的。他们的做法是常见的做法吗?开发人员是否需要进行代码审查?他们使用哪些工具?让我们在这篇文章中找到答案。首先,让我为您提供一些有关Microsoft的关键信息。微软大约有140,000名员工。其中约有44%,即超过60,000名员工是工程师。成千上万的工程师同时使用相同的代码库来开发Office,VisualStudio或Windows等几种产品。可以想象,确保不同子团队开发的代码可以完美地协同工作是一项艰巨的任务。在Microsoft中,代码审查起着重要作用,确保可以在如此大规模的范围内实现顺畅的协作。Microsoft的代码审查是开发过程中不可或缺的一部分在M

  • Arduino硬件开发入门点亮LED

    原作者:陈帅华-探索技术艺术与国学之美原文链接:http://www.shuaihuajun.com/article/arduino-led/我现在手里有一套Ruff开发板套件和一套Arduino开发板套件。把Ruff开发套件中的所有传感器用了一个遍之后没玩够,于是开始把玩Arduino。没有对比就没有伤害真的是,虽然我真正接触Arduino时间不长,但就我自己的感觉来说,Arduino不论从程序角度还是从硬件角度上来讲都比Ruff更底层也就更加灵活,从长远来看Arduino更具学习和研究价值。所以果断弃坑Ruff,拥抱Arduino。不过Ruff基于JavaScript语言编写控制硬件的程序确实勾起我对宏大的物联网世界的兴趣。Ruff更适合快速做出原型,但无法进入生产环境,这满足不了我对物联网世界更底层的好奇。所以再见,Ruff,你好,Arduino。ArduinoIDEarduinoide集成开发环境界面Arduino集成开发环境支持语法检查、上传程序到开发板、串口监视器等主要功能,最常使用的就是这三个功能。一个Arduino程序需要包含一个setup函数和一个loop函数,loo

  • 软件文档总结(二)

    =    在软件文档中有几个比较重要的文档重点介绍一下  1、软件需求说明书   软件需求主要是从从现实中分离功能,描述软件要“做什么”,在软件需求说明书中,主要的功能和联系如下:   2、概要设计说明书和详细设计说明书    概要设计和详细设计都属于软件设计,是根据软件需求说明导出系统的实现方案,主要描述“怎么做”。    概要设计说明书——设计出组成软件的主要模块及其之间的关系;    详细设计说明书——设计实现模块的算法和数据结构。    概要设计文档最重要的部分是分层数据流图、结构图、数据字典以及相应的文字说明等;详细设计文档最重要的部分是模块的流程图、状态图、局部变量及相应的文字说明等。一个模块一篇详细设计文档。概要设计说明书相当于机械设计中的装配图,而详细设计说明书相当于机械设计中的零件图。    3、数据库设计说明书    大家都对软件工程的生命周期比较熟悉,数据库也有其生命周期:    数据库是大楼的根基。在我们之前做机房收费系统的时候,后期出现输出错误数据,数据类型错误等都和前期数据库的设计有密切的关系,要是在从新设计数据库或者进行优化的话,会花费很多的时间,数据

  • 使用.net core ABP和Angular模板构建博客管理系统(实现编辑页面功能)

    初步实现编辑更新功能新建一个edit-note模块如下: 编辑模块我们看看作者的新建页面用到了什么, 用到了ngx-bootstrap的弹出层。官网地址:https://valor-software.com/ngx-bootstrap/#/modals#modal-directive 然后是一个基类AppComponentBase edit-user.component.ts在我们页面引入相关组件 import{Component,ViewChild,Injector,Output,EventEmitter,ElementRef}from'@angular/core'; import{ModalDirective}from'ngx-bootstrap'; import{NoteServiceService,NoteDto,UpdateNoteDto}from'@app/blog/note-service.service'; import{AppComponentBase}from'@shared/app-compon

  • 使用MVS 2010和Uhuru PaaS部署您的第一个.NET数据库应用程序

    我希望我的上一篇文章能提起你对这篇文章的兴致!不久之前,我和一个朋友正在讨论云计算,SaaS,IaaS和PaaS。我们都有一个共同的重要因素,那就是我们在IT行业中是一起开始的职业生涯,并在后来成为了我们所对应领域的IT架构师/解决方案架构师。所以他问了我一个关于我对PaaS的想法,以及它会在实际中如何影响传统的软件开发/部署的问题。我的脑海中灵光一现,然后我想到的是微软Azure,CloudFoundry。顺便说一下,那时我已经开始接触到了UhuruCloudTrialPaaS。然后我向他提起了UhuruCloud。他首先问了我一个问题,它是否仅适用于.NET应用程序?我的回答则是否,它针对的是托管MSSQL和MySQL数据库平台+NoSQL数据库的基于Windows和Linux的应用程序,如MongoDB和Redis等他沉默了一会儿。然后继续,尔后他提到,Uhuru是否还是测试版本?我说是的,他是对的,我也重复了他提到的我在这个过程中最初陷入的一些错误。作为架构师,我们接下来得出的结论是,世界上没有任何软件是完美无缺的。image.png。最后,他说他正打算去看看Azure。然后我

  • Spring Boot中使用JUnit5进行单元测试

    SpringBoot学了这么久,我还没用过它的单元测试。今天我就系统完整地学习总结一下在SpringBoot中使用JUnit5框架进行单元测试。其实本节主要还是学习JUnit5的使用。有一句话说的好,我可以不用,但我必须会用。 1.JUnit5的变化2.JUnit5的常用注解3.断言机制4.前置条件(assumptions)5.嵌套测试6.参数化测试1.JUnit5的变化SpringBoot2.2.0版本开始引入JUnit5作为单元测试默认库。作为最新版本的JUnit框架,JUnit5与之前版本的Junit框架有很大的不同。由三个不同子项目的几个不同模块组成(JUnit5=JUnitPlatform+JUnitJupiter+JUnitVintage)。JUnitPlatform:JunitPlatform是在JVM上启动测试框架的基础,不仅支持Junit自制的测试引擎,其他测试引擎也都可以接入。 JUnitJupiter:JUnitJupiter提供了JUnit5的新的编程模型,是JUnit5新特性的核心。内部包含了一个测试引擎,用于在JunitPlatform上运行。 JUnitV

  • zookeeper的ACL

    基于上编zookeeper的Kerberos: 1、zookeeper的认证方式   可分为world,auth,digest,ip和super。   world表示任何人都可以连接       auth表示需要通过授权       digest是用户密码 2、添加用户并授权   setAcl/nodedigest:[username]:[Encryptedpassword]:[perms] 3、用户认证   addauthdigestusername:passwd 4、创建超级管理员   admin:admin  admin:xlnq8J5GOJVPY6zgzhtTtA9izLc=   编辑文件:usr/hdp/current/zookeeper-client/bin/zkServer.sh    在135行添加配置,中间有空格   "-Dzookeeper.root.logger=${ZOO_LOG4J_PROP}""-Dz

  • STL源码阅读(七)

    STL源码阅读(七)(SGISTLv3.3) stl_set.h(<set>) set使用红黑树实现,每个键值都不相同,且按序存储。注意operator=(即_Rb_tree的实现)先销毁赋值号左边的set, 然后将右边的set拷贝给左边的set,而不是原值替换。 set的所有函数都是用_Rb_tree的函数实现的,相当于_Rb_tree的一个包装类。 stl_multiset.h(<set>) multiset使用红黑树实现,键值可重复,按序存储。相当于_Rb_tree的一个包装类。 stl_map.h(<map>) 使用红黑树实现,键值不可重复,按键值顺序排序。相当于_Rb_tree的一个包装类。 注意:嵌套类value_compare实际比较的还是键值。 stl_multimap.h(<map>) 使用红黑树实现,和map基本相同,只不过是可以重复相同的键值。 stl_slist.h(<forward_list>C++11) 和list相比,实现方式不同,list通过双向环状链表实现

  • 个人最终总结(新)

    翻译   软件工程师应当自己做分析、规范、设计、开发、测试和维护,从而成为一个有用处的和受人尊敬的职业。根据他们对软件健壮性、安全性和福利性的承诺,软件工程师应当遵守以下八条原则:   1.公众性原则——软件工程师的开发方向应始终和用户意向一致;   2.客户和雇主关系原则——软件工程师开发应符合客户和雇主的意愿;   3.产品质量原则——软件工程师应该保证他们的产品或发布的模型可以通过最高水平的校验;   4.判断公平性原则——软件工程师应当时刻保持公正公平的原则,尤其是对自己的项目;   5.管理原则——软件工程管理者和领导者应为软件开发和维护管理提供正确的方式;   6.专业性原则——软件工程师应为自己在用户印象中的廉正和声誉做出表率;   7.同事关系处理原则——软件工程师应该公平对待自己的同事,并给予支持;   8.自我学习原则——软件工程师应就其专业参与终身学习,对专业实践应鼓励正确的方式。   学习感受        说说一些实话把。既然要我们当开始知道有软件工程这门课我还以为只是写写代码,学学一些数据

  • OSI和TCP/IP模型

    一、OSI七层参考模型:开放系统互连参考模型 OSI七层参考模型 TCP/IP模型 对应的协议 应用层   应用层 HTTP、FTP、DNS、SMTP、POP3、Telnet、TFTP、DHCP、SSH、NTP、Ping命令 表示层 会话层 传输层 主机到主机层 TCP、UDP 网络层 互联网层 IP、ICMP、ARP、RARP 数据链路层 网络接口层 Ethernet、802.3、PPP 物理层   物理层 比特流传输(数据中的信号)、接口和线缆、传输介质(有线、无线)。 PDU:协议数据单元,数据在不同层的表现形式。 一层PDU:bit 功能:规定介质类型、接口类型、信令类型(电话拨号),规范在终端系统之间激活、维护和关闭物理链路的电气、机械、流程和功能等方面的要求,规范电平、数据速率、最大传输距离和物理接头等特征。 物理层介质:同轴电缆、双绞线(568B的线序:橙白、橙、绿白、蓝、蓝白、绿、棕白、棕)、光纤、无线电波。 物理层设备:中继器(还原信号,

  • 34. 在排序数组中查找元素的第一个和最后一个位置

    给定一个按照升序排列的整数数组nums,和一个目标值target。找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值target,返回 [-1,-1]。 输入:nums=[5,7,7,8,8,10],target=8 输出:[3,4] 复制 实现时间复杂度为O(logn) classSolution{ publicint[]searchRange(int[]nums,inttarget){ intisFind=binarySearch(nums,target); if(isFind==-1) returnnewint[]{-1,-1}; intleft=isFind-1; intright=isFind+1; while(left>=0&&nums[left]==target){//isFind左边是否还有target left--; } while(right<nums.length&&nums[right]==target){//isFind右边是否还有target right++; } returnnewi

  • 虚拟机安装CentOS

    CentOS7Mini 软件来源: http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-Minimal-1804.iso 选国内镜像 虚拟机安装CentOS7: root密码:admin123

  • 博客文章收藏整理

    五个小技巧让你写出更好的JavaScript条件语句 https://mp.weixin.qq.com/s/k9W1uM4eJtcHRSsbW_KNqg 下拉搜索插件jQuery的带搜索过滤ajax加载下拉框插件http://www.htmleaf.com/jQuery/Form/201603313282.html

  • WPF开源项目

    WPF有很多优秀的开源项目,我以为大家都知道,结果,问了很多人,其实他们不知道。唉,太可惜了! 先介绍两个比较牛逼的界面库 1、MaterialDesignInXamlToolkit   Android风格的界面。   2、MahApps.Metro 扁平风格的界面。   在使用中如果有问题,可以到“Gitter”的相应房间里和开发者进行交流(英文╭∩╮(︶︿︶)╭∩╮)。   这效果就不多说了,两个字“牛逼”!如果觉得有用,点拨赞!赞!赞!

  • LeetCode刷题篇之第189道算法题的解题思路

    LeetCode刷题篇之第1道算法题的解题思路LeetCode刷题篇之第58道算法题的解题思路LeetCode刷题篇之第67道算法题的解题思路LeetCode刷题篇之第557道算法题的解题思路先上题目:189.旋转数组给定一个数组,将数组中的元素向右移动k个位置,其中k是非负数。 示例1: 输入:[1,2,3,4,5,6,7]和k=3 输出:[5,6,7,1,2,3,4] 解释: 向右旋转1步:[7,1,2,3,4,5,6] 向右旋转2步:[6,7,1,2,3,4,5] 向右旋转3步:[5,6,7,1,2,3,4] 复制 示例2: 输入:[-1,-100,3,99]和k=2 输出:[3,99,-1,-100] 解释: 向右旋转1步:[99,-1,-100,3] 向右旋转2步:[3,99,-1,-100] 复制 说明: 尽可能想出更多的解决方案,至少有三种不同的方法可以解决这个问题。要求使用空间复杂度为O(1)的原地算法。 答案: /** *@param{number[]}nums *@param{number}k *@return{void}Donotreturnanything

  • 之字形打印二叉树

    publicList<List<Integer>>zigzagLevelOrder(TreeNoderoot){ List<List<Integer>>ans=newArrayList<>(); if(root==null) returnans; //使用两个栈维护顺序 Stack<TreeNode>stack=newStack<>(); Stack<TreeNode>nextStack=newStack<>(); stack.add(root); intflag=0; List<Integer>lay=newArrayList<>(); while(!stack.isEmpty()){ TreeNodenode=stack.pop(); lay.add(node.val); //如果当前是从左到右遍历,按左子树右子树的顺序添加 if(flag==0){ if(node.left!=

  • 06.总要先人一步(讲任正非管理华为)

    1.井无压力不出油,人无压力轻如灰。 2.新东方教育科技集团的董事徐小平说:“创业的过程,漫长而艰苦,充满了风险和各种各样的地雷,所以你要趟过3.不管是做工作,或是选择创业,都要有三种境界:能干,肯干,干好"4.我们的战略规划办,是研究公司3~5年的发展战略,不是研究公司10年、20年之后的发展战略,我不知道公司能不能活过20年。5.有一句话说得好:“合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。6.按照常识,所有员工都必须遵守公司的规章制度,无论是正式的还是不成文的。7.宁肯一直招不到人,也不要把那些不适合的人招进来。如果因为招不到人而不得不放宽用人要求,最后受损失的只有公司。8.有经验的创业者会采取另外一种招人策略:他们招聘“三流”人才,让他们干“二流”的工作,然后给他们“一流“的待遇。《华为基本法》壳牌石油公司长相都稍差一点的女孩子,在起身离开时,顺手把椅子推回了原位,而另外两个女孩子直接走掉了。华为在这方面采取的办法是,为员工提供双通道发展模式,让他们每个人都有个明确的发展空间。“政治路线确定之后,干部就是决定的因素。华为在干部的选拔上,采取了“三权分立”的机制。

  • golang iris下面的websocket

    最近要做后台主动推送:(iris框架,封装的有wesocket,刚开始以为直接拿过来用,结果不是现在贴一下代码,写一下遇到的坑) funcmain(){   app:=iris.New()   app.Adapt(iris.DevLogger())   app.Adapt(httprouter.New())   //创建websocket服务器   ws:=websocket.New(websocket.Config{      Endpoint:"/pushmessage",   })   ws.OnConnection(func(cwebsocket.Connection){      c.Join("/push")   &nb

相关推荐

推荐阅读