tableexport 加标题_在iView中的表格table组件里加入传统的title提示

在Vue项目中目前使用频率较高的UI组件库有ElementUI和iView，而我们当前这个项目选择了iView作为UI组件库，于是踏上了漫漫填坑之旅。

目前项目进行到中后期，QA的同事提出了一个问题，就是：表格里超出长度的部分会折行显示，把该行的高度加大。我们在iView.css中手动把td标签的样式添加了text-overflow: ellipsis; 仅仅这样显然是没法满足要求的——被省略的文字就看不到了。

在普通的html的td标签中只要加上title属性就可以了，但是我们的表格都是用iView的table组件写的(具体api和用法可以去iView官方文档处查看)。

只要对iView有些了解的朋友都知道在用table组件时，是需要定义列(表头)数据以及各个列对应的数据的字段名。如果需要在table中某一行加入按钮或超链接，则需要利用Vue中的render方法来动态渲染出来。

可是上文中提到的，我们只是需要一个最简单的title而已，翻遍iView的文档也没有发现相关的属性或解决办法，我在网上随便搜了一下，发现有不少人都遇到了这个问题，有人在GitHub上提出了这个issue，但是iView的作者并没有回答这个问题，而是把这个问题关闭了，这个操作还是比较迷的(就像简书没有标签功能一样迷)。我在另一篇提问(链接找不到了-_-|||)当中看到了疑似iView作者的回答，提醒了我用render方法来解决这个小问题。

以下就是我的解决办法：

Methods中的方法：

initTableColumn(columnName){

for(let i = 0; i < this[columnName].length; i++){

if(!this[columnName][i].render) {

this.$set(this[columnName][i], 'ellipsis', true);

this.$set(this[columnName][i], 'render', (h, params) => {

return h('span', {attrs: {title: params.row[params.column.key]}}, params.row[params.column.key]);

});

}

}

},

在mounted中调用该方法：

this.initTableColumn('tableCols');

调用时的参数是在组件的data中定义的列数据的变量名

希望对有需要的朋友有帮助，如果你有其他的方法或想法，欢迎留言讨论:D