不用 :show-overflow-tooltip=“true”，element-UI table文字超出*行，隱藏多余文字，移入顯示tips

element-UI table關鍵是插槽 與 行列的條件判斷 scope.$index scope.row
動態字段名的使用
element-UI table文字超出兩行，隱藏多余文字，移入顯示tips
element-UI表格的列屬性
超出兩行隱藏多余文本，移入時tips顯示全部內容
超出的文本的隱藏
文本超過兩行，移入時tips顯示全部內容
通過長度判斷
element-UI表格的列屬性
通過設置 :show-overflow-tooltip=“true” 這個屬性可以達成超出一行的文字用省略號替代，並帶有移入時tips顯示全部內容的需求。但是如果想要文本超出兩行、三行的需求，顯然設置這個屬性是無法完成的。

超出兩行隱藏多余文本，移入時tips顯示全部內容
我們想完成的是超出兩行才用省略號隱藏多余文本，並且移入才會有tips顯示；兩行以內的文本則不隱藏也不顯示tips。

超出的文本的隱藏

.myNote{
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}

文本超過兩行，移入時tips顯示全部內容

<!-- tips懸浮提示 -->
<el-tooltip
        placement="top"
        v-model="scope.row.showTooltip"
        :open-delay="500"
        effect="dark"
        :disabled="!scope.row.showTooltip">
  <div slot="content">{{scope.row.note}}</div>
  <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{scope.row.note}}</div>
</el-tooltip>

注意！ 顯示懸浮提示時v-model 和 disabled屬性要一起使用才有效果。

 showTips(obj, row){
      /*obj為鼠標移入時的事件對象*/

      /*currentWidth 為文本在頁面中所占的寬度，創建標簽，加入到頁面，獲取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement('span');
      TemporaryTag.innerText = row.note;
      TemporaryTag.className = 'getTextWidth';
      document.querySelector('body').appendChild(TemporaryTag);
      let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
      document.querySelector('.getTextWidth').remove();

      /*cellWidth為表格容器的寬度*/
      const cellWidth = obj.target.offsetWidth

      /*當文本寬度小於||等於容器寬度兩倍時，代表文本顯示未超過兩行*/
      currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
}

通過長度判斷

通過表格高度去判斷，但是后來發現，高度不是一個固定不變的值，會隨着移入移出變化，並且其他列的高度超出也會影響到一整行的高度。所以最后還是通過文本寬度來判斷，把文本寬度與容器寬度比較，這樣得到的值才是固定不變的。