欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?element表格某一列內容過多,超出省略號顯示的實現

 更新時間:2022年01月24日 10:33:50   作者:璐哈路哈呦  
這篇文章主要介紹了vue?element表格某一列內容過多,超出省略號顯示的實現方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

element表格某一列內容過多,超出省略號顯示

在使用element組件庫里面的table組件時,遇到某一個字段內容過多,導致td高度被撐開,布局顯得很不美觀,像這樣

 這時我們只要給table-cloumn添加一個屬性show-overflow-tooltip,

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

實現超出隱藏,并有提示,這樣的話會有下面效果:

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

可以在處理下樣式,如下:

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

這樣就好了,效果如下

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

element-UI table文字超出兩行,隱藏多余文字,移入顯示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 為文本在頁面中所占的寬度,創(chuàng)建標簽,加入到頁面,獲取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
}

通過長度判斷

在這里插入圖片描述

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

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

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

以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • vue+Element中table表格實現可編輯(select下拉框)

    vue+Element中table表格實現可編輯(select下拉框)

    這篇文章主要介紹了vue+Element中table表格實現可編輯,實現select下拉框,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-05-05
  • Vue3項目中配置TypeScript和JavaScript的兼容

    Vue3項目中配置TypeScript和JavaScript的兼容

    在Vue3開發(fā)中,常見的使用JavaScript(JS)編寫代碼,但也會有調整編寫語言使用TypeScript(TS)的需求,因此,在Vue3項目設置中兼容TS和JS是刻不容緩的重要任務,
    2023-08-08
  • vue在組件中使用v-model的場景

    vue在組件中使用v-model的場景

    這篇文章主要介紹了vue在組件中使用v-model的場景,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-07-07
  • vue-next-admin項目使用cdn加速詳細配置

    vue-next-admin項目使用cdn加速詳細配置

    這篇文章主要為大家介紹了vue-next-admin項目使用cdn加速的詳細配置,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • 如何區(qū)分vue中的v-show 與 v-if

    如何區(qū)分vue中的v-show 與 v-if

    這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ,幫助大家更好的理解和學習vue框架,感興趣的朋友可以了解下
    2020-09-09
  • Vue3中的組合式?API示例詳解

    Vue3中的組合式?API示例詳解

    組合式 API 是一系列 API 的集合,使我們可以使用函數而不是聲明選項的方式書寫 Vue 組件,這篇文章主要介紹了什么是Vue3的組合式?API,需要的朋友可以參考下
    2022-06-06
  • vue中mint-ui環(huán)境搭建詳細介紹

    vue中mint-ui環(huán)境搭建詳細介紹

    這篇文章主要介紹了vue中mint-ui環(huán)境搭建詳細介紹的相關資料,需要的朋友可以參考下
    2017-04-04
  • Vue如何將時間戳轉換日期格式

    Vue如何將時間戳轉換日期格式

    這篇文章主要介紹了Vue如何將時間戳轉換日期格式,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • 淺談VUE中演示v-for為什么要加key

    淺談VUE中演示v-for為什么要加key

    這篇文章主要介紹了淺談VUE中演示v-for為什么要加key,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-01-01
  • Vue項目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁面后狀態(tài)依然保持)

    Vue項目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁面后狀態(tài)依然保持)

    關于vue登錄注冊,并保持登錄狀態(tài),是vue玩家必經之路,這篇文章主要給大家介紹了關于Vue項目如何保持用戶登錄狀態(tài)的相關資料,localStorage+vuex刷新頁面后狀態(tài)依然保持,需要的朋友可以參考下
    2022-05-05

最新評論