快捷導(dǎo)航

vue?element表格某一列內(nèi)容過多,超出省略號顯示的實(shí)現(xiàn)

更新時(shí)間：2022年01月24日 10:33:50 作者：璐哈路哈呦

這篇文章主要介紹了vue?element表格某一列內(nèi)容過多,超出省略號顯示的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element表格某一列內(nèi)容過多,超出省略號顯示

在使用element組件庫里面的table組件時(shí)，遇到某一個(gè)字段內(nèi)容過多，導(dǎo)致td高度被撐開，布局顯得很不美觀，像這樣

這時(shí)我們只要給table-cloumn添加一個(gè)屬性show-overflow-tooltip，

<el-table-column label="描述" :show-overflow-tooltip='true'>
              <template slot-scope="scope">
                <span>{{scope.row.ms}}</span>
              </template>
            </el-table-column>

實(shí)現(xiàn)超出隱藏，并有提示，這樣的話會有下面效果：

提示的長度特別長，超出了屏幕，不太好看。

可以在處理下樣式，如下：

<style>
 .el-tooltip__popper{
    max-width:20%;
  }
  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background:rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
  }
</style>

這樣就好了，效果如下

如果想要設(shè)置，顯示幾行，超過指定的值再隱藏，可以參考下面

element-UI table文字超出兩行，隱藏多余文字，移入顯示tips

element-UI表格的列屬性

通過設(shè)置 :show-overflow-tooltip=“true” 這個(gè)屬性可以達(dá)成超出一行的文字用省略號替代，并帶有移入時(shí)tips顯示全部內(nèi)容的需求。但是如果想要文本超出兩行、三行的需求，顯然設(shè)置這個(gè)屬性是無法完成的。

超出兩行隱藏多余文本，移入時(shí)tips顯示全部內(nèi)容

我們想完成的是超出兩行才用省略號隱藏多余文本，并且移入才會有tips顯示；兩行以內(nèi)的文本則不隱藏也不顯示tips。

超出的文本的隱藏

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

文本超過兩行，移入時(shí)tips顯示全部內(nèi)容

<!-- 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>

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

showTips(obj, row){
      /*obj為鼠標(biāo)移入時(shí)的事件對象*/
      /*currentWidth 為文本在頁面中所占的寬度，創(chuàng)建標(biāo)簽，加入到頁面，獲取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
      /*當(dāng)文本寬度小于||等于容器寬度兩倍時(shí)，代表文本顯示未超過兩行*/
      currentWidth <= (2*cellWidth) ? row.showTooltip = false : row.showTooltip = true
}

通過長度判斷

在這里插入圖片描述

一開始我是想通過表格高度去判斷，但是后來發(fā)現(xiàn)，高度不是一個(gè)固定不變的值，會隨著移入移出變化，并且其他列的高度超出也會影響到一整行的高度。所以最后還是通過文本寬度來判斷，把文本寬度與容器寬度比較，這樣得到的值才是固定不變的。

有朋友說會出現(xiàn)多個(gè)tips，我是直接放在el-table-column的template里面的，目前沒發(fā)現(xiàn)這種情況。

<el-table-column
                prop="note"
                label="簡介">
          <template slot-scope="scope">
            <!-- 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>
          </template>
        </el-table-column>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: