iview的table中Tooltip的使用

这篇文章主要介绍了iview-admin中在table中使用Tooltip提示效果。

1. table中文字溢出隐藏，提示气泡展示所有信息

longText(item){
    item.render = (h, params)=>{
        // 处理文字，溢出用点代替
        let txt = params.row[params.column.key]
        let tableTxt = null
        if(txt){
            if(txt.length > item.longText){
                tableTxt = txt.substring(0, item.longText) + '.....'
            }else{
                tableTxt = txt
            }
        }
        
        return h('Tooltip', {
            props: {
                placement: 'top'
            }
        },[
            tableTxt,
            h('span', {slot: 'content', style: {whiteSpace: 'normal', wordBreak: 'break-all'}}, txt)
        ])
    }
    return item
},
// style是 必须的，否则无法换行显示

2. Tooltip 折行显示效果

{
    title: '状态监控',
    align: 'center',
    key: 'stat'
    render: (h, params) => {
        return h('Tooltip', {
            props: {
                placement: "right"
            }
        },[
            stat,
            [
                h('p', { slot: 'content'},'CPU:11.1%'),
                h('p', { slot: 'content'},'内存:5/12GB')
            ]
        ]);
    }
}
// 使用多个标签实现多行显示，而不是换行


// 动态添加多条气泡提示
{
    title: '错误信息',
    align: 'center',
    key: 'stat'
    render: (h, params) => {
        let txt = params.row[params.column.key]
        let arr = []
        ['m1', 'm2', 'm3'].forEach(msg => {
            let piece = h('p', { slot: 'content'}, msg)
        })
        return h('Tooltip', {
            props: {
                placement: "right"
            }
        },[txt, arr]);
    }
}
// 使用多个标签实现多行显示，而不是换行

3. 单独使用Tooltip实现折行效果

<!-- 注意 Tooltip 内的文本使用了 white-space: nowrap;，即不自动换行，如需展示很多内容并自动换行时，建议给内容 slot 增加样式 white-space: normal; -->
<Tooltip :disabled="!msg">
    <div slot="content" style="white-space:normal">{{msg}}</div>
    <Input v-model="msg" />
</Tooltip>