在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

你可能感兴趣的:(在iView中的表格table组件里加入传统的title提示)