先获取行高和文本的高度，然后通过js动态修改样式实现文本超出一行后显示省略号，这样就可以获得哪些文本超出了一行，哪些文本没有超出一行

<template>
	<div>
		<el-tooltip
			class="box-item"
			effect="dark"
			:content="scope.row[prop]"
			placement="top-start"
			append-to=".m-table"
			:teleported="true"
			:disabled="isDisabled"
		>
			<div ref="text" :style="{ ...textStyle }" class="column-tooltip-text">
				{{ scope.row[prop] }}
			</div>
		</el-tooltip>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from "vue";

let props = defineProps(["label", "prop", "width", "align", "fixed", "scope"]);

let textStyle = ref();
let isDisabled = ref(false);
const text = ref(null);

const getStyle = (type = "init") => {
	// @ts-ignore
	let lineHeight = getComputedStyle(text.value).lineHeight.replace("px", "") - 0 || 23;
	// @ts-ignore
	let height = getComputedStyle(text.value).height.replace("px", "") - 0;
	// console.log(lineHeight, height, props.scope.row[props.prop]);
	if (type === "init") {
		if (height > lineHeight) {
			isDisabled.value = false;
			textStyle.value = {
				height: `${lineHeight}px`,
				overflow: "hidden",
				textOverflow: "ellipsis",
				display: "-webkit-box",
				webkitLineClamp: 1,
				webkitBoxOrient: "vertical",
				cursor: "pointer"
			};
		} else {
			isDisabled.value = true;
			textStyle.value = {
				cursor: "text"
			};
		}
	} else if (type === "update") {
		if (height > lineHeight) {
			isDisabled.value = false;
			textStyle.value = {
				height: `${lineHeight}px`,
				overflow: "hidden",
				textOverflow: "ellipsis",
				display: "-webkit-box",
				webkitLineClamp: 1,
				webkitBoxOrient: "vertical",
				cursor: "pointer"
			};
		}
	}
};

onMounted(() => {
	getStyle("init");
	nextTick(() => {
		setTimeout(() => {
			getStyle("update");
		}, 1000);
	});
});
</script>

<style>
.m-table .column-tooltip-text {
	word-break: break-all;
	display: inline-block;
	max-width: 100%;
}
</style>

人工智能学习网站

https://chat.xutongbao.top