如何解决elementplus table的show-overflow-tooltip不能选中复制的问题

451 阅读1分钟

解决方案

表格这个属性原本就是没法支持选中复制的,既然没法使用表格自带的属性,那只能用其他的方式。何不尝试使用el-tooltip来实现呢?

重新封装el-tooltip

<script setup lang="ts">
interface SubData {
    data: string;
}

const props = withDefaults(defineProps<SubData>(), {
    data: '',
});
</script>

<template>
    <div>
        <el-tooltip
            v-if="props.data.length > 12"
            class="box-item"
            effect="dark"
            :content="props.data"
            placement="top-start"
        >
            <div>
                {{ props.data.substr(0, 9) + '...' }}
            </div>
        </el-tooltip>
        <span v-else>{{ props.data }}</span>
    </div>
</template>

在表格里用插槽插入封装好的tooltip

<template #default="scoped">
    <public-tooltip :data="scoped.row.name" />
</template>

这样子就可以复制内容啦,你还可以自己修改tooltip的样式,就是那么简单,点个赞吧!