在iview的Table表格中，如果数据超出当前列的宽度，多余的部分会折行显示，使得该行的高度增加。为了实现*

文本将不换行，超出部分显示为省略号

的效果，iview提供了表头属性ellipsis。然而这个属性却有一个弊端，就是显示为省略号的部分对用户来说是不可见的，非常影响体验，而且在iview文档中，作者并未给出任何解决办法。
最简单的解决办法是给相关数据增加title属性，使得鼠标移入时可以显示全部信息。在SegmentFault上找到了相关代码

要在column中的–表格列的配置–描述添加
注意area的值，后面也要相应对应是area的值，否则找不到data中的area的值，就会报错。

render: (h, params) => {

           return h(‘div’, [

                     h(‘span’, {

                              style: {

                                       display: ‘inline-block’,

                                        width: ‘100%’,

                                        overflow: ‘hidden’,

                                        textOverflow: ‘ellipsis’,

                                        whiteSpace: ‘nowrap’

                               },

                               domProps: {

                                         title: params.row.courseName

                               }

                       }, params.row.courseName)

         ])

}

作者：曼珠沙华_521b
链接：https://www.jianshu.com/p/23152ef738bf
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。