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

最近项目中遇到一个列较多的表格，需要里面的内容根据屏幕宽度自适应，每一列最多显示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)
        }
    }]
]

下面介绍toolTipLink和toolTip这两个函数，因为很多地方用到，所以我提取出来作为公共函数了，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)
    ])
}

附上效果图：