省略号显示，移上去显示全部信息

<template>

    <el-form-item :label="label">

        <el-tooltip  

            :content="tvalue"

            placement="top"

            effect="light"

            :disabled="!isShowTooltip"

        >

            <div

                @mouseenter="visibilityChange($event)"

                style="overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;"

            >

               {{tvalue}}

            </div>

        </el-tooltip>

    </el-form-item>

</template>

<script>

    export default{

        name:"FormItemTooltip",

        props:{

            tvalue:{

                default:'',

                 type: [String,Number]

            },

            label:{

                default:'',

                type:[String,Number]

            }

           

        },

        data(){

            return{

                isShowTooltip:false,

            }

           

        },

        methods:{

              visibilityChange(event) {

                // console.log(event)

                const ev = event.target;

                const ev_weight = ev.scrollWidth; // 文本的实际宽度   scrollWidth：对象的实际内容的宽度，

                const content_weight = ev.clientWidth;// 文本的可视宽度 clientWidth：对象内容的可视区的宽度

                    if (ev_weight > content_weight) {

                        // 实际宽度 > 可视宽度  文字溢出

                        this.isShowTooltip = true;

                    } else {

                        // 否则为不溢出

                        this.isShowTooltip = false;

                    }

                }

        }

    }

</script>

<style>

    .el-tooltip__popper {

        max-width: 400px;

        line-height: 180%;

    }

</style>