iview表格单元格中render函数完美实现最多显示N行,超出后省略号...并鼠标移上去Tooltip提示

2021-01-26 111点热度 1人点赞 0条评论

最近项目中遇到一个列较多的表格,需要里面的内容根据屏幕宽度自适应,每一列最多显示2行(有些情况下最多显示一行),超出的部分用...,并且鼠标移上去用ToolTip显示全部

如果是简单的单行显示不下就用...并且Tooltip提示,自带的就可以实现了:

var columns = [
    {
        title: '仪器型号',
        key: 'model',
        ellipsis: true,//超出用...
        tooltip: true,//鼠标移上去Tooltip提示
        minWidth: 150
    }
]

但是很多情况下没有这么简单,比如

  • 这一行的内容特别多,这个时候默认的Tooltip就显示不全
  • 这一行本身是用render函数渲染的,这个时候就不起作用
  • 客户需求是最多显示2行,超过2行才...,这个时候默认也无法实现
经过一番研究,自己实现了这些功能,特此分享:
var columns = [{
        title: '仪器名称',
        minWidth: 180,
        //下面这两个去掉
        //ellipsis: true, //超出用...
        //tooltip: true, //鼠标移上去Tooltip提示
        key: 'equipName',
        sortable: 'custom',
        render: function(h, params) {
            return toolTipLink(h, 1, params.row.equipName, "../main/equip?ml=702&no=" + params.row.equipNo);
        }
    },
    var columns = [{
        title: '仪器型号',
        key: 'model',
        //下面这两个去掉
        //ellipsis: true, //超出用...
        //tooltip: true, //鼠标移上去Tooltip提示
        minWidth: 150,
        render: function(h, params) {
            return toolTip(h, 2, params.row.model)
        }
    }]
]

下面介绍toolTipLinktoolTip这两个函数,因为很多地方用到,所以我提取出来作为公共函数了,toolTipLink是render出超链接的函数 toolTip是普通的文本

//render出超链接的函数
//lines最多显示多少行 content内容
function toolTip(h, lines, content) {
    return h('Tooltip', {
        props: { placement: 'bottom-start', transfer: true }
    }, [
        h('span', { style: { textOverflow: 'ellipsis', whiteSpace: 'normal',overflow: 'hidden',display: '-webkit-box', webkitBoxOrient:'vertical', webkitLineClamp: lines+'' } }, content),
        h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, content)
    ])
}

//render出超链接的函数
//lines最多显示多少行 content内容 url链接地址
function toolTipLink(h, lines, content, url) {
    return h('Tooltip', {
        props: { placement: 'bottom-start', transfer: true, content: content}
    }, [
        h("a", {
            domProps: {
                href: url
            },
            style: { textOverflow: 'ellipsis', whiteSpace: 'normal',overflow: 'hidden',display: '-webkit-box', webkitBoxOrient:'vertical', webkitLineClamp: lines+'' }
        }, content)
    ])
}

附上效果图:

 

Terry

记录开发运维过程中遇到的坑以及解决方案,干货分享

文章评论

*

code