Ant Design Table 如何動態自定義?Ant Popover 遮擋?

来源:https://www.cnblogs.com/evanpatchouli/archive/2023/01/19/17061917.html
-Advertisement-
Play Games

項目場景: 基於electron + Vue + node.js + express + mysql + evanpatchouli-mysql + Ant-Design-Vue,編寫一款屬於自己的輕量級MySQL資料庫界面工具。 問題列表 如何動態渲染高度自定義的Ant Design Table? ...


項目場景:

基於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,感覺上手不是很快,還在學習中,如有講的不對的地方還請見諒。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1 簡介 Solace是一個強大的實時性的事件驅動消息隊列。本文將介紹如何在Spring中使用,雖然代碼使用的是Spring Boot,但並沒有使用相關starter,跟Spring的整合一樣,可通用。JMS是通過的消息處理框架,可以深入學習一下,不同的MQ在JMS的整合上都是類似的。 2 通過Do ...
  • 2023-01-18 一、Spring中組件掃描 1、預設使用的情況 <context:component-scan base-package="com.hh"></context:component-scan> 2、包含掃描 註:使用包含掃描之前,必須設置use-default-filters=" ...
  • EntityFrameworkCore是微軟官網提供的ORM框架,是輕量化、可擴展、開源和跨平臺的數據訪問技術框架,但是在.Net 開發圈的評論卻褒貶不一。很多人認為EFCore 執行的效能比較差,很多複雜的查詢場景很難實現,也有很多人認為,EFCore 開發簡單,在中小型項目中,能夠快速的實現業務 ...
  • 運行環境:Window10,.Net7.0; 編者:烏龍哈里 2023-01-13 經常碰到兩個控制項需要相互傳遞消息,這時候需要用到事件。比如現有兩個類如下: class AA { private string Text = "AA"; public void SetText(string s) { ...
  • Cortex M 的中斷和優先順序, 首先要區分開 中斷 和 中斷優先順序 這是兩個不同的東西, 對於 Cortex-M0 和 Cortex-M0+ 內核, 除了系統內建中斷外, 支持最多 32 個中斷. 對於 Cortex-M3 內核, 除了 16 個內核中斷外, 支持最多 240 個中斷, 有8-b... ...
  • 分組數據 數據分組 分組允許把數據分為多個邏輯組,以便能對每個組進行聚集計算。 創建分組 分組是在SELECT語句的GROUP BY子句中建立的: SELECT vend_id, COUNT(*) AS num_prods FROM products GROUP BY vend_id; 註意: GR ...
  • 關於資料庫的性能優化其實是一個很複雜的大課題,很難通過一篇帖子講的很全面和深刻,這也就是為什麼我的標題是‘淺析’,程式員的成長一定是要付出代價和成本,因為只有真的在一線切身體會到當時的緊張和壓力,對於一件事情才能印象深刻,但反之也不能太過於強調代價,如果可以通過一些別人的分享就可以規避一些自己業務的... ...
  • 在 Vue 中,如果直接對數組進行操作,比如使用下標直接修改元素, Vue 是無法監測到這種變化的,導致無法觸發視圖更新。因此如何監測數組變化是值得關註的問題。 ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 1. 講故事 年前遇到了好幾例托管堆被損壞的案例,有些運氣好一些,從被破壞的托管堆記憶體現場能觀測出大概是什麼問題,但更多的情況下是無法做出準確判斷的,原因就在於生成的dump是第二現場,借用之前文章的一張圖,大家可以理解一下。 為了幫助更多受此問題困擾的朋友,這篇來整理一下如何 快狠準 的 ...
  • 前言 .NET6 開始,.NET Croe API 項目取消了 Startup.cs 文件,在 Program.cs 文件的 Main 函數中完成服務的註冊和中間件管道的管理。但當我們項目引入更多包的時候,Program.cs 文件也會看起來很臃腫。 而且,我們不只會有一個後端項目,為了方便快速創建 ...
  • 目錄 背景 get 與 post 的區別 所有介面都用 post 請求? 背景 最近在逛知乎的時候發現一個有趣的問題:公司規定所有介面都用 post 請求,這是為什麼? 看到這個問題的時候其實我也挺有感觸的,因為我也曾經這樣問過我自己。在上上一家公司的時候接到一個項目是從零開始搭建一個微服務,當時就 ...
  • *以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://mp.weixin.qq.com/s/2GFLTstDC7w6u3fTJxflNA 本文大概 1685 個字,閱讀需花 6 分鐘內容不多, 但也花了一些精力如要交流, 歡迎關註我然後評論區留言 謝謝你的 ...
  • 在新版本的pandas中,上述代碼會引起警告,建議改成SQLAlchemy connectable(engine/connection),後續代碼將引入這種升級的連接方式。 ...
  • 幾乎所有的高級編程語言都有自己的垃圾回收機制,開發者不需要關註記憶體的申請與釋放,Python 也不例外。Python 官方團隊的文章 https://devguide.python.org/internals/garbage-collector 詳細介紹了 Python 中的垃圾回收演算法,本文是這篇 ...
  • 如果您想查找高於或低於平均值的數字,可以不必計算該平均值,就能查看更高或更低的值。通過Java應用程式,可以自動突出顯示這些數字。除了快速突出顯示高於或低於平均值的值外,您還可以查看高於或低於的值的個數。現在讓我們看看如何在 Java應用程式中實現此操作。 引入jar包 導入方法1: 手動引入。將  ...
  • 第一種方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 說明:{}為創建一個空的字典對象 第二種方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #valu ...
  • 在golang中可以使用a := b這種方式將b賦值給a,只有當b能進行深拷貝時a與b才不會互相影響,否則就需要進行更為複雜的深拷貝。 下麵就是Go賦值操作的一個說明: Go語言中所有賦值操作都是值傳遞,如果結構中不含指針,則直接賦值就是深度拷貝;如果結構中含有指針(包括自定義指針,以及切片,map ...
  • 本文結合京東監控埋點場景,對解決樣板代碼的技術選型方案進行分析,給出最終解決方案後,結合理論和實踐進一步展開。通過關註文中的技術分析過程和技術場景,讀者可收穫一種樣板代碼思想過程和解決思路,並對Java編譯器底層有初步瞭解。 ...