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
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...