快捷導(dǎo)航

element el-tooltip動(dòng)態(tài)顯示隱藏(有省略號(hào)顯示,沒(méi)有省略號(hào)不顯示)

更新時(shí)間：2023年09月16日 09:41:27 作者：Fighting_p

本文主要介紹了element el-tooltip動(dòng)態(tài)顯示隱藏,主要實(shí)現(xiàn)有省略號(hào)顯示,沒(méi)有省略號(hào)不顯示,具有一定的參考價(jià)值,感興趣的可以了解一下

遇到需要在table的單元格內(nèi)展示多行信息的需求，此時(shí)table組件中的show-overflow-tooltip屬性會(huì)將多行信息全部提示出來(lái)

<el-row v-loading="loading" :gutter="30" class="warning-wrapper">
<el-col
  v-for="(risk, index) in tableData"
  :key="index + '' + risk.zrr"
  :lg="8"
  :md="8"
  :sm="12"
  :xl="8"
  :xs="12"
  class="warning-item"
>
  <el-card class="warning-card">
    <div>
      <el-popover :offset="-100" placement="bottom-start" trigger="click" width="380">
        <!-- ... -->
        <div slot="reference" class="header-text">
          <el-tooltip
            effect="dark"
            :content="risk.zrrView"
            placement="top-start"
            :disabled="tooltipIsShow"
          >
            <span
              :class="['name', `zrrView${index}`]"
              @mouseenter="tooltipIsDisHandler(`.zrrView${index}`)"
            >
              {{ risk.zrrView }}
            </span>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            :content="risk.zrrView !== risk.ssbmView ? risk.ssbmView : ''"
            placement="top-start"
            :disabled="tooltipIsShow"
          >
            <span
              v-if="risk.zrrView !== risk.ssbmView"
              :class="['site', `ssbmView${index}`]"
              @mouseenter="tooltipIsDisHandler(`.ssbmView${index}`)"
            >
              {{ risk.ssbmView }}
            </span>
          </el-tooltip>
          <!-- ... -->
        </div>
      </el-popover>
      <div class="warning-people" @click="openDetail(risk)">
        <div class="article-points">
          <el-tooltip
            class="item"
            effect="dark"
            :content="risk.mxmc"
            placement="top-start"
            :disabled="tooltipIsShow"
          >
            <div
              :class="[`mxmc${index}`]"
              @mouseenter="tooltipIsDisHandler(`.mxmc${index}`)"
            >
              XXXX: {{ risk.mxmc }}
            </div>
          </el-tooltip>
          <div>XXXX: {{ risk.cjsj }}</div>
        </div>
      </div>
    </div>
  </el-card>
</el-col>
</el-row>

data() {
  return {
    // ...
    tooltipIsShow: false // 是否展示tooltip
  }
},
tooltipIsDisHandler(className) {
 this.$nextTick(() => {
    const dom = document.querySelector(className)
    const domScrollWidth = dom && dom.scrollWidth
    const domClientWidth = dom && dom.clientWidth
    this.tooltipIsShow = domClientWidth >= domScrollWidth
  })
}

最開(kāi)始想的解決辦法 （實(shí)現(xiàn)不了，因?yàn)樵?this.$nextTick() 中計(jì)算的結(jié)果在 tooltipIsDisHandler 中無(wú)法直接 return）

到此這篇關(guān)于element el-tooltip動(dòng)態(tài)顯示隱藏(有省略號(hào)顯示,沒(méi)有省略號(hào)不顯示)的文章就介紹到這了,更多相關(guān)el-tooltip動(dòng)態(tài)顯示隱藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: