vxe-table 单元格超出隐藏内容提示使用自定义插槽模板
<p>vxe-table 单元格超出隐藏内容提示使用自定义插槽模板<br>当内容溢出时显示为省略号，show-overflow 和 show-header-overflow 和 show-footer-overflow<br>
如果需要更灵活的展示，还可以使用自定义提示插槽模板，通过 headert-tooltip、tooltip、footer-tooltip 来自定义模板</p>
<p>查看官网：https://vxetable.cn<br>
gitbub：https://github.com/x-extends/vxe-table<br>
gitee：https://gitee.com/x-extends/vxe-table</p>
<h2 id="效果">效果</h2>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202509/3563285-20250905175933346-501507117.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202509/3563285-20250905175945119-1196231693.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202509/3563285-20250905175953423-204404114.png"></p>
<h2 id="代码">代码</h2>
<p>单元格提示模板，使用插槽 headert-tooltip、tooltip、footer-tooltip 来自定义模板</p>
<pre><code class="language-html"><template>
<div>
<vxe-grid v-bind="gridOptions">
<template #header-tooltip="{ column }">
<span style="color: red;">自定义表头：{{ column.title }}</span>
</template>
<template #tooltip="{ row, column }">
<div>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
</div>
</template>
<template #footer-tooltip="{ row, column }">
<span style="color: chartreuse">自定义表尾：{{ row }}</span>
</template>
</vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
showOverflow: true,
showHeaderOverflow: true,
showFooterOverflow: true,
showFooter: true,
columns: [
{ field: 'seq', type: 'seq', width: 70 },
{ field: 'name', title: '名称' },
{ field: 'role', title: '角色' },
{ field: 'date', title: '日期日期日期日期日期日期日期日期日期', width: 200 },
{ field: 'rate', title: 'Rate' },
{ field: 'address', title: '地址地址地址地址地址地址地址地址地址地址', width: 200 }
],
data: [
{ name: 'Test1', role: '前端', date: '2020-02-14', rate: 5, address: 'address1' },
{ name: 'Test2', role: '后端', date: '2020-02-22', rate: 2, address: 'address1' },
{ name: 'Test3', role: '前端', date: '2020-01-01', rate: 0, address: '深圳市深圳市深圳市深圳市深圳市深圳市' },
{ name: 'Test4', role: '设计师', date: '2020-02-23', rate: 1, address: '上海市上海市上海市上海市上海市上海市' },
{ name: 'Test5', role: '前端', date: '2020-01-20', rate: 3, address: '广州市广州市广州市广州市广州市广州市广州市广州市广州市' }
],
footerData: [
{ seq: '合计', date: '2020-02-23', rate: '123456789123456789123456789123456789' }
]
})
</script>
</code></pre>
<h2 id="自定义宽高">自定义宽高</h2>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202509/3563285-20250908092126537-528095168.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202509/3563285-20250908092134531-783375049.png"></p>
<pre><code class="language-html"><template>
<div>
<vxe-grid v-bind="gridOptions">
<template #header-tooltip="{ column }">
<div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
<div style="color: red;">自定义表头：{{ column.title }}</div>
</div>
</template>
<template #tooltip="{ row, column }">
<div style="width: 800px;">
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
<div style="color: orange;">自定义：{{ row }}</div>
<vxe-link status="primary" href="https://vxeui.com/" target="_blank">点击查看官网</vxe-link>
</div>
</template>
<template #footer-tooltip="{ row, column }">
<div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
<div style="color: chartreuse">自定义表尾：{{ row }}</div>
</div>
</template>
</vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
height: 300,
showOverflow: true,
showHeaderOverflow: true,
showFooterOverflow: true,
showFooter: true,
tooltipConfig: {
enterable: true,
maxWidth: 400,
maxHeight: 300
},
columns: [
{ field: 'seq', type: 'seq', width: 70 },
{ field: 'name', title: '名称' },
{ field: 'role', title: '角色' },
{ field: 'date', title: '日期日期日期日期日期日期日期日期日期', width: 200 },
{ field: 'rate', title: 'Rate' },
{ field: 'address', title: '地址地址地址地址地址地址地址地址地址地址', width: 200 }
],
data: [
{ name: 'Test1', role: '前端', date: '2020-02-14', rate: 5, address: 'address1' },
{ name: 'Test2', role: '后端', date: '2020-02-22', rate: 2, address: 'address1' },
{ name: 'Test3', role: '前端', date: '2020-01-01', rate: 0, address: '深圳市深圳市深圳市深圳市深圳市深圳市' },
{ name: 'Test4', role: '设计师', date: '2020-02-23', rate: 1, address: '上海市上海市上海市上海市上海市上海市' },
{ name: 'Test5', role: '前端', date: '2020-01-20', rate: 3, address: '广州市广州市广州市广州市广州市广州市广州市广州市广州市' }
],
footerData: [
{ seq: '合计', date: '2020-02-23', rate: '123456789123456789123456789123456789' }
]
})
</script>
</code></pre>
<p>https://gitee.com/x-extends/vxe-table</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19075909
頁:
[1]