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

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

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

var columns = [
    {
        title: '仪器型号',
        key: 'model',
        <span class="hljs-attr">ellipsis</span>: <span class="hljs-literal">true</span>,//超出用...
        tooltip: true,//鼠标移上去Tooltip提示
        minWidth: 150
    }
]

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

• 这一行的内容特别多，这个时候默认的Tooltip就显示不全
• 这一行本身是用render函数渲染的，这个时候就不起作用
• 客户需求是最多显示2行，超过2行才...，这个时候默认也无法实现

经过一番研究，自己实现了这些功能，附图如下：

如何实现，请查看我的博客 https://blog.terrynow.com/2021/01/26/iview-table-render-ellipsis-n-lines-and-tooltip/

更多开发和运维过程中遇到的坑已经解决问题的方案、干货分享请访问 https://blog.terrynow.com/