vxe-table 单位格 Tooltip 内容过多时启用滚动条

在利用 vxe-table 时，单位格内容过长会触发 Tooltip 悬浮提示。但默认的 Tooltip 尺寸有限，当提示内容非常多（比方包罗大量笔墨、自界说组件、列表等）时，会出现内容溢出、体现不全的题目。本文将先容怎样通过设置 tooltipConfig 及相干插槽，让 Tooltip 容器固定宽高并主动体现滚动条，从而优雅地展示全部内容。
参数阐明

vxe-table 为表头（header）、单位格（body）、表尾（footer）分别提供了独立的 Tooltip 设置项：
设置属性作用对象常用字段headerTooltipConfig表头单位格（需开启 showHeaderOverflow）width, height, maxWidth, maxHeighttooltipConfig数据行单位格（需开启 showOverflow）width, height, maxWidth, maxHeightfooterTooltipConfig表尾单位格（需开启 showFooterOverflow）width, height, maxWidth, maxHeight当 Tooltip 内容高出 maxWidth 或 maxHeight 时，内部会主动出现滚动条。你也可以直接设置固定 width / height 逼迫指定容器尺寸。
代码

1. <template>
2.   
3.     <vxe-grid v-bind="gridOptions">
4.       
5.       <template #header-tooltip="{ column }">
6.         
7.           自定义表头：{{ column.title }}
8.           自定义表头：{{ column.title }}
9.           自定义表头：{{ column.title }}
10.           自定义表头：{{ column.title }}
11.           自定义表头：{{ column.title }}
12.           自定义表头：{{ column.title }}
13.           自定义表头：{{ column.title }}
14.           自定义表头：{{ column.title }}
15.           自定义表头：{{ column.title }}
16.           自定义表头：{{ column.title }}
17.           自定义表头：{{ column.title }}
18.           自定义表头：{{ column.title }}
19.           自定义表头：{{ column.title }}
20.           自定义表头：{{ column.title }}
21.           自定义表头：{{ column.title }}
22.           自定义表头：{{ column.title }}
23.           自定义表头：{{ column.title }}
24.           自定义表头：{{ column.title }}
25.           自定义表头：{{ column.title }}
26.           自定义表头：{{ column.title }}
27.           自定义表头：{{ column.title }}
28.         
29.       </template>
30.       
31.       <template #tooltip="{ row, column }">
32.         
33.           自定义：{{ row[column.field] }}
34.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
35.           自定义：{{ row[column.field] }}
36.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
37.           自定义：{{ row[column.field] }}
38.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
39.           自定义：{{ row[column.field] }}
40.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
41.           自定义：{{ row[column.field] }}
42.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
43.           自定义：{{ row[column.field] }}
44.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
45.           自定义：{{ row[column.field] }}
46.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
47.           自定义：{{ row[column.field] }}
48.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
49.           自定义：{{ row[column.field] }}
50.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
51.           自定义：{{ row[column.field] }}
52.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
53.           自定义：{{ row[column.field] }}
54.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
55.           自定义：{{ row[column.field] }}
56.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
57.           自定义：{{ row[column.field] }}
58.           <vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
59.         
60.       </template>
61.       
62.       
63.       <template #footer-tooltip="{ row, column }">
64.         
65.           自定义表尾：{{ row[column.field] }}
66.           自定义表尾：{{ row[column.field] }}
67.           自定义表尾：{{ row[column.field] }}
68.           自定义表尾：{{ row[column.field] }}
69.           自定义表尾：{{ row[column.field] }}
70.           自定义表尾：{{ row[column.field] }}
71.           自定义表尾：{{ row[column.field] }}
72.           自定义表尾：{{ row[column.field] }}
73.           自定义表尾：{{ row[column.field] }}
74.           自定义表尾：{{ row[column.field] }}
75.           自定义表尾：{{ row[column.field] }}
76.           自定义表尾：{{ row[column.field] }}
77.           自定义表尾：{{ row[column.field] }}
78.           自定义表尾：{{ row[column.field] }}
79.           自定义表尾：{{ row[column.field] }}
80.           自定义表尾：{{ row[column.field] }}
81.           自定义表尾：{{ row[column.field] }}
82.           自定义表尾：{{ row[column.field] }}
83.           自定义表尾：{{ row[column.field] }}
84.           自定义表尾：{{ row[column.field] }}
85.           自定义表尾：{{ row[column.field] }}
86.           自定义表尾：{{ row[column.field] }}
87.           自定义表尾：{{ row[column.field] }}
88.         
89.       </template>
90.     </vxe-grid>
91.   
92. </template>

复制代码

• tooltipConfig 仅对设置了 showOverflow 的列收效。对于不开启溢出提示的列，Tooltip 不会出现，也就无法控制滚动。
  
• 如果自界说插槽内容自己已经具有滚动条（比方内部 div 设置了 overflow: auto），则表格的 maxHeight 仍会限定整个 Tooltip 容器，大概导致双重滚动条。发起同一利用表格设置控制，克制内嵌滚动。
  

https://vxetable.cn

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.