在Vue項(xiàng)目中目前使用頻率較高的UI組件庫(kù)有ElementUI和iView，而我們當(dāng)前這個(gè)項(xiàng)目選擇了iView作為UI組件庫(kù)，于是踏上了漫漫填坑之旅。
目前項(xiàng)目進(jìn)行到中后期，QA的同事提出了一個(gè)問(wèn)題，就是：表格里超出長(zhǎng)度的部分會(huì)折行顯示，把該行的高度加大。我們?cè)趇View.css中手動(dòng)把td標(biāo)簽的樣式添加了text-overflow: ellipsis; 僅僅這樣顯然是沒(méi)法滿足要求的——被省略的文字就看不到了。
在普通的html的td標(biāo)簽中只要加上title屬性就可以了，但是我們的表格都是用iView的table組件寫(xiě)的（具體api和用法可以去iView官方文檔處查看）。
只要對(duì)iView有些了解的朋友都知道在用table組件時(shí)，是需要定義列（表頭）數(shù)據(jù)以及各個(gè)列對(duì)應(yīng)的數(shù)據(jù)的字段名。如果需要在table中某一行加入按鈕或超鏈接，則需要利用Vue中的render方法來(lái)動(dòng)態(tài)渲染出來(lái)。
可是上文中提到的，我們只是需要一個(gè)最簡(jiǎn)單的title而已，翻遍iView的文檔也沒(méi)有發(fā)現(xiàn)相關(guān)的屬性或解決辦法，我在網(wǎng)上隨便搜了一下，發(fā)現(xiàn)有不少人都遇到了這個(gè)問(wèn)題，有人在GitHub上提出了這個(gè)issue，但是iView的作者并沒(méi)有回答這個(gè)問(wèn)題，而是把這個(gè)問(wèn)題關(guān)閉了，這個(gè)操作還是比較迷的（就像簡(jiǎn)書(shū)沒(méi)有標(biāo)簽功能一樣迷）。我在另一篇提問(wèn)(鏈接找不到了-_-|||)當(dāng)中看到了疑似iView作者的回答，提醒了我用render方法來(lái)解決這個(gè)小問(wèn)題。
以下就是我的解決辦法：

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中調(diào)用該方法：

this.initTableColumn('tableCols');

調(diào)用時(shí)的參數(shù)是在組件的data中定義的列數(shù)據(jù)的變量名
希望對(duì)有需要的朋友有幫助，如果你有其他的方法或想法，歡迎留言討論:D