【Vue】使用elementPlus的table时,实现自定义tooltip效果，单行显示，超出则显示省略号，鼠标移入后，当文字数量大于20则换行自定义展示的tooltip_table tooltip

使用elementPlus的table时，实现自定义show-overflow-tooltip效果，文字在table中单行显示，超出宽度则显示省略号，鼠标移入后，当文字为30个字以内的时候单行显示tooltip，超出30个字则显示可以换行自定义展示的tooltip

一开始我是用的table的show-overflow-tooltip属性

• 默认情况下，如果table单元格内容过长，会占用多行显示。
• 若需要单行显示可以使用 show-overflow-tooltip 属性，它接受一个 Boolean， 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。

<el-table
	:data="state.tableData.data"
	row-key="id"
	:header-cell-style="{ textAlign: 'center' }"
	:cell-style="{ textAlign: 'center' }"
	:row-class-name="tableRowClassName"
	border
	style="width: 100%"
	v-loading="state.tableLoading"
	@selection-change="onSelectionChange"
>
	<el-table-column type="selection" :reserve-selection="true" width="50" fixed />
	<el-table-column type="index" label="序号" width="70" fixed />
	<el-table-column prop="regionName" label="项目所在区域" show-overflow-tooltip width="230" fixed></el-table-column>
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如上代码，当字段超出单元格宽度，鼠标移入的时候会显示一个黑色的提示框，但是默认提示框只显示一行，数据过长就会很丑！！！

改进方案el-popover

本来想直接使用插槽与el-tooltip实现的，发现不太好实现自定义效果，然后找到el-popover实现设置宽度与换行显示。

<el-table-column prop="summary" label="概要" width="300">
	<template #default="scope">
		<span v-if="scope.row.summary?.length <= 20">
			{{ scope.row.summary }}
		</span>
		<span v-else-if="!scope.row.summary?.length"> --- </span>
		<span v-else>
			<el-popover effect="dark" placement="top-start" :width="400" trigger="hover" :content="scope.row.summary">
				<template #reference> {{ scope.row.summary?.slice(0, 20) }}... </template>
			</el-popover>
		</span>
	</template>
</el-table-column>
1
2
3
4
5
6
7
8
9
10
11
12
13

实现自定义tooltip效果，文字在table中单行显示，超出宽度则显示省略号，当内容为空的时候显示占位符---鼠标移入后，当文字为20个字以内的时候单行显示tooltip，超出20个字则显示可以换行自定义展示的tooltip