正在阅读:
Antdesign vue table 文字超宽tooltip方式显示
首先来看下效果:
表格里的内容由于过多,为了整体美观性,使用超出文字以tooltip的形式进行展示,主要使用了插槽(slot)的方式。
一、编写一个tooltip工具
代码如下:
<template> <a-tooltip placement="topLeft"> <template slot="title"> <span>{{value}}</span> </template> {{ value | ellipsis(length) }} </a-tooltip> </template> <script> export default { name: 'JEllipsis', props: { value: { type: String, required: false, }, length: { type: Number, required: false, default: 25, } } } </script> <style scoped> </style>
默认为25个字符,多余的使用...代替
二、页面引用
在需要用到的页面引入上述工具代码,如:
import JEllipsis from './JEllipsis'
2.1 在table的列配置中增加如下代码:
{ title: '汇报内容', align: 'center', dataIndex: 'huiBaoNeiRong', width: 350, scopedSlots: { customRender: 'huiBaoNeiRong' } },
2.2 在table中增加插槽,如
<a-table> <span slot="huiBaoNeiRong" slot-scope="text"> <j-ellipsis v-if="text.length>22" :value="text" :length="22"/> <span v-else>{{text}}</span> </span> </a-table>
按照实际的长度,超过的用...代替,不超过的全部显示。
该日志由 bemender 于 2020年12月16日 发表
转载请注明文本地址:https://www.bemhome.com/post/85.html