ElementUi使用el-tooltip实现超出部分显示省略号

效果前：

效果后：

创建myTooltio.vue组件

<template>
    <div class="tooltip-container">
        <el-tooltip class="my-tooltip" :disabled="showTooltip" :content="text">
            <p ref="tooltipBox" class="text-box">
                <span ref="tooltipItem" class="">{{text}}</span>
            </p>
        </el-tooltip>
    </div>
</template>

<script>
    export default {
        name: "myTooltip",
        props: {
            text: {
                type: String,
                default: () => ""
            }
        },
        data(){
            return {
                showTooltip: true
            }
        },
        watch:{
            text:{
                handler(){
                    this.$nextTick(()=>this.checkWidth());
                },
                immediate: true
            }
        },
        methods:{
            checkWidth(){
                const boxWidth = this.$refs['tooltipBox'].offsetWidth;
                const itemWidth = this.$refs['tooltipItem'].offsetWidth;
                this.showTooltip = boxWidth > itemWidth
            }
        }
    };
</script>
<style scoped lang="less">
    .tooltip-container{
        width:100%;
        .text-box{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
</style>

引入myTooltio.vue组件

在需要的*.vue中引入

<div class="test">
    <my-tooltip :text="2132131231231231231231221"></my-tooltip>
</div>
<script>
    import myTooltip from "@/components/tools/myTooltip";
    export default {
        name: "TestItem",
        components: {
            myTooltip
        },
    }
<style scoped>
    /deep/ .test{
        width:180px;
        height: 40px;
        /*border:1px solid #345123;*/
        cursor:pointer;
    }
</style>

至此刷新页面即可。

若报错，提示缺少less和less-loader模块，需要安装一下。

cmd打开命令窗口进入到当前项目路径下，分别输出以下命令安装：

# 保险起见，我们还是安装4+比较好
npm install less@4 --save-dev
# less-loader的版本号要搭配webpack的版本号来选择，webpack@4+可以选择的less-loader版本是5~7
npm install less-loader@7 --save-dev