vue中元素上加上ref屬性取值，相當(dāng)于取整個元素的，和$("#id")類似。但是要用此屬性需要了解加載的時間，從官網(wǎng)上可以看到

關(guān)于 ref 注冊時間的重要說明：因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應(yīng)式的，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定。

一般用法就是在mounted方法中加入this.$nextTick

mounted() {
  this.$nextTick(() => { // 頁面渲染完成后的回調(diào)
    this.ul_Height=this.$refs.ulheight.offsetHeight
  })
}
//this.$refs.ulheight==undefined

但是如果$refs在el-dialog中用上述方法還是會undefined,如下：

<el-dialog
    class="fileLibraryDialog"
    title="文件庫"
    :visible.sync="fileLibraryData.isShow"
    >
    <ul ref="ulheight" class="groupTree">
        ……
    </ul>
 </el-dialog>

解決的方法就是在el-dialog中加入回調(diào)函數(shù)@open，然后在回調(diào)函數(shù)方法中用this.$nextTick。

<el-dialog
    class="fileLibraryDialog"
    @open="getUlHeight"
    title="文件庫"
    :visible.sync="fileLibraryData.isShow"
    >
    <ul ref="ulheight" class="groupTree">
        ……
    </ul>
 </el-dialog>
//js部分:
methods:{
  getUlHeight(){
    this.$nextTick(()=>{ 
      this.ul_Height=this.$refs.ulheight.offsetHeight
    })
  }
}