zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    [leetcode]存在重复
    [leetcode]旋转数组
    git使用方法(持续更新)
    [LeetCode]从排序数组中删除重复项
    Communications link failure--分析之(JDBC的多种超时情况)
    云主机挂载磁盘
    hadoop对于压缩文件的支持
    linux 转移mysql文件操作流程
    MindManager2018 修改过期时间 配置文件路径
    Innodb 中 RR 隔离级别能否防止幻读?
  • 原文地址:https://www.cnblogs.com/codebook/p/11938208.html
Copyright © 2011-2022 走看看