項(xiàng)目場景：
基于electron + Vue + node.js + express + mysql + evanpatchouli-mysql + Ant-Design-Vue窍仰，編寫一款屬于自己的輕量級MySQL數(shù)據(jù)庫界面工具汉规。
問題列表
- 如何動(dòng)態(tài)渲染高度自定義的Ant Design Table？
- Ant Design Table 表頭固定辈赋，內(nèi)部Popover意外遮擋
問題描述
問題1
???????作為一款數(shù)據(jù)庫界面工具鲫忍，需要?jiǎng)討B(tài)地獲得數(shù)據(jù)庫和表的信息，因此要渲染的表結(jié)構(gòu)經(jīng)常在變钥屈。
???????Ant Design Vue的官方手冊給出的示例里悟民，全部采用:datasource綁定數(shù)據(jù)源，:columns綁定表結(jié)構(gòu)篷就，如果想自定義column的內(nèi)容射亏，就往標(biāo)簽內(nèi)嵌插槽<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>
???????我復(fù)制了這個(gè)模板用到我的表格中，并且自定義了一個(gè)懸浮觸發(fā)的Popover竭业，這就存在一個(gè)問題：模板里智润，<a-table>內(nèi)寫了自定義的<a-table-column>，表頭是在column標(biāo)簽上綁定title未辆，但title不支持像:title這樣的動(dòng)態(tài)綁定窟绷，只能綁定一個(gè)死的字符串。
???????寫死的表頭并不符合我動(dòng)態(tài)渲染不同表格的需求咐柜，刪掉寫死的表頭兼蜈，則不會(huì)渲染表頭；我嘗試為<a-table>定義了columns拙友，表頭是有了为狸，但我自己寫<a-table-column>又會(huì)被默認(rèn)樣式覆蓋，單純的渲染了源數(shù)據(jù)遗契。
原因分析：
???????無論有沒有綁定:columns時(shí)辐棒，渲染規(guī)則是一定的。為此，我們需要弄清楚不同情況下參數(shù)的映射關(guān)系漾根，才能正確的渲染我們想要的效果泰涂。
解決方案1：
按照上面那個(gè)模板改：
不綁定columns，手寫ant-table-column立叛，v-for綁定表結(jié)構(gòu)對column進(jìn)行列表渲染负敏，并綁定:dataindex為字段名去拿到數(shù)據(jù)，內(nèi)置兩個(gè)插槽對應(yīng)表頭和內(nèi)容秘蛇，#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>默認(rèn)值: {{ item.Default }}</p>
<p>權(quán)限: {{ 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：
不用官方給的這個(gè)示例其做，換一種插槽的方式
不寫ant-table-column，在ant-table上綁定columns
內(nèi)置兩個(gè)插槽對應(yīng)表頭和內(nèi)容赁还，#headerCell和#bodyCell
內(nèi)容依舊是用v-for進(jìn)行渲染
<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
???????我的應(yīng)用做了響應(yīng)式界面妖泄，當(dāng)electron窗口高度減小時(shí)，ant-table可見高度也隨之減小艘策，為此我設(shè)置了它的:scroll蹈胡，為其動(dòng)態(tài)指定了一個(gè)監(jiān)聽窗口的變量作為高度（y）。
???????我使用問題一的方案一中的代碼時(shí)朋蔫，當(dāng)我的數(shù)據(jù)只有寥寥幾條或者窗口很扁的時(shí)候罚渐，鼠標(biāo)懸浮字段浮現(xiàn)的popover被限制在表可見高度內(nèi)，無法完全顯示驯妄。
???????為了解決這個(gè)問題荷并，我先嘗試css穿透ant-table，設(shè)置overflow為visible青扔，無效源织。又嘗試將xss穿透popover，設(shè)置其z-index為更高值微猖，無效谈息。
原因分析
ant-popover在渲染時(shí)，默認(rèn)是掛載到最大的父容器body上凛剥。在我復(fù)制下來的示例代碼中侠仇，指定了其掛載的容器為出發(fā)事件所在的容器-即ant-table，由于ant-table被我設(shè)置了高度犁珠，popover若高度比表格更高傅瞻，溢出部分只能滑動(dòng)父容器（ant-table）查看。
解決方案
???????刪除ant-popover標(biāo)簽內(nèi)綁定的掛載容器傳值盲憎，或者為其指定一個(gè)合適的掛載容器。
題外話
???????這是我第一次使用ant-design胳挎，感覺上手不是很快饼疙，還在學(xué)習(xí)中，如有講的不對的地方還請見諒。
