vue?this.$refs.xxx獲取dom注意事項(xiàng)?v-if?v-for渲染的dom不能直接使用

更新時(shí)間：2023年03月27日 08:58:47 作者：yehaocheng520

這篇文章主要介紹了vue?this.$refs.xxx獲取dom注意事項(xiàng)?v-if?v-for渲染的dom不能直接使用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

今天遇到一個(gè)問題

vue項(xiàng)目：

v-for渲染的元素，如果內(nèi)容超過一行，則右側(cè)展示一個(gè)"更多"按鈕，點(diǎn)擊“更多”按鈕后，再展示全部的數(shù)據(jù)。

在上家公司的時(shí)候，我也遇到過類似的要求，但是當(dāng)時(shí)水平菜的底氣硬，直接一個(gè)不會(huì)，愣是把需求改為了全部展示，今天遇到了這個(gè)問題，想著還是要解決一下，困難就是成長。

我的思路是

一行的內(nèi)容高度是50px,我只需要判斷渲染完成后，內(nèi)容區(qū)的高度是否超過50px即可。

于是：html部分代碼：

<div class="searchWrap">
  <div class="searchItem" v-for="(tag, tagIndex) in pinPaiList" :key="tagIndex">
    <div class="searchLeft">{{ tag.tagSortTitle }}</div>
    <div class="searchList" :ref="'tagParent' + tagIndex">
      <div v-for="(p, pIndex) in tag.items" :key="pIndex" class="listCls">
        <span @click="selectPP(tagIndex, pIndex)" :class="{ active: p.checked }">{{ p.value | filterStr }}</span></div></div>
    <div class="searchMore">
      <div>
       	<div class="el-icon-arrow-down" v-if="tag.moreFlag" @click="moreData(tagIndex)">更多</div>
        <div class="el-icon-circle-check" v-if="tag.selectMore" @click="sureSearch(tagIndex)"
          :class="{ active: tag.selectMore }" >確定</div>
        <div @click="changeType(tagIndex)" :class="{ active: tag.selectMore }" class="el-icon-circle-plus-outline">{{ !tag.selectMore ? "單選" : "多選" }}
        </div>
      </div>
    </div>
  </div>
</div>

上面代碼的重點(diǎn)在于，我要在v-for渲染的dom元素上綁定ref,動(dòng)態(tài)綁定屬性的方式跟其他的動(dòng)態(tài)綁定一致：

:ref="'tagParent' + tagIndex"

tag.moreFlag就是判斷是否要展示更多按鈕的關(guān)鍵，這個(gè)是根據(jù)dom元素的高度來判斷的。

vue項(xiàng)目中獲取dom元素的高度——this.$refs.xxx

vue項(xiàng)目中獲取dom元素的高度可以通過this.$refs.xxx的方式來處理：

但是我在使用的過程中，this.$refs.xxx的方式獲取dom，經(jīng)常會(huì)出現(xiàn)undefined，也有少數(shù)情況是可以獲取到的。

具體原因就是：如果是用v-if或者v-for渲染的dom元素，是不能直接使用this.$refs.xxx的方式來獲取dom的，即便是放在this.$nextTick里面也是不行的。

具體原因可以查看下面的鏈接：

http://www.dhdzp.com/article/279018.htm

具體的解決方法就是

需要在獲取到數(shù)據(jù)之后，再通過this.$nextTick的方式來處理：

我這邊的處理方法如下：

...
//此處的this.pinPaiList是從上面的接口中獲取到的數(shù)據(jù)，需要循環(huán)遍歷，依次判斷高度
this.pinPaiList && this.pinPaiList.forEach((p, pIndex) => {
   this.$nextTick(() => {
   //一定要注意通過this.$refs.xxx的方式獲取到的dom要取index為0的一項(xiàng)，然后獲取高度通過clientHight來獲取，如果不是v-if或者v-for渲染的dom，則不需要加這個(gè)0。
     var height = this.$refs[`tagParent${pIndex}`][0].clientHeight;
     if (height > 50) {
       this.pinPaiList[pIndex].moreFlag = true;
       //如果判斷出來某一項(xiàng)的高度超出一行，則延遲將此行的高度設(shè)置為一行，進(jìn)而展示更多按鈕，點(diǎn)擊更多按鈕時(shí)將height改為auto即可
       setTimeout(() => {
         this.$refs[`tagParent${pIndex}`][0].style.height = "35px";
       }, 0);
     } else {
       this.pinPaiList[pIndex].moreFlag = false;
     }
     this.$set(this.pinPaiList, pIndex, this.pinPaiList[pIndex]);
   });
 });
...
//點(diǎn)擊更多按鈕
moreData(index) {
  this.pinPaiList[index].moreFlag = false;
  this.$set(this.pinPaiList, index, this.pinPaiList[index]);//這個(gè)是vue2的缺陷，數(shù)據(jù)改變視圖不渲染的解決方案
  setTimeout(() => {
    this.$refs[`tagParent${index}`][0].style.height = "auto";
  }, 0);
}

問題解決?。?！