Ant表格中溢出隐藏

Ant 实现表格中溢出隐藏悬浮框展示

针对有对表格中某一项过长时产生的换行和一定的不美观性

书说简短我们先来代码实现

封装一个组件方便我们在各个表格之中调用

<template>
    <div class="text-wrapper" :style="{width:`${columnsWidth-32}px`}">
        <a-tooltip placement="top" v-if="visible">
                <template slot="title">
                        <span ref="text" class="text">{{text}}</span>
                </template>
                <span ref="text" class="text">{{text}}</span>
        </a-tooltip>
        <span ref="text" class="text" v-else>{{text}}</span>
    </div>
</template>
<script>
        export default {
                name: "textHidden",
                props:{
                        columnsWidth:{
                                type:Number,
                                default(){
                                        return 0
                                }
                        },
                        text:{
                                type:String,
                                default () {
                                        return '';
                                }
                        }
                },
                data(){
                        return {
                                textWidth:0
                        }
                },
                computed:{
                        visible(){
                                return this.textWidth>(this.columnsWidth-32)
                        }
                },
                mounted () {
                        this.$nextTick(()=>{
                                this.textWidth = this.$refs['text'].offsetWidth
                        })
                }
        }
</script>
<style scoped >
        .text-wrapper
            width 80px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            .text
                    display inline
</style>

在需要使用的地方引入组件 :

import textHidden form './textHidden'

需要使用的表格中使用slot插槽

<text-hidden slot="fileName" slot-scope="prop,props" :text="prop" :columnsWidth="350"/>

其中text代表悬浮的文字，columnsWidth代表设置的最大宽度超过宽度溢出隐藏跟在columns中设置的width保持一致

###看一眼实现效果