vxe-table 单元格超出隐藏内容提示使用自定义插槽模板

vxe-table 单元格超出隐藏内容提示使用自定义插槽模板
当内容溢出时显示为省略号，show-overflow 和 show-header-overflow 和 show-footer-overflow
如果需要更灵活的展示，还可以使用自定义提示插槽模板，通过 headert-tooltip、tooltip、footer-tooltip 来自定义模板

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

效果

代码

单元格提示模板，使用插槽 headert-tooltip、tooltip、footer-tooltip 来自定义模板

<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[column.field] }}</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[column.field] }}</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>

https://gitee.com/x-extends/vxe-table