el-dialog 里面是一個表單,表單元素比較多,所以頁面有滾動條。需要設置每次打開表單的時候,滾動條在頂部。
頁面有一個按鈕,點擊按鈕打開el-dialog 彈框。
一開始在網山搜索,有給元素設 id ,然后用 document.getElementById("idName").scrollTop = 0; 來設置滾動條到頂部。
也有說給元素設置 ref="box",然后在代碼中 使用 this.$refs.box.scrollTop = 0 ; 來設置滾動條 到頂部。
如下代碼:
methods(){ handleBtnclick(){ this..dialogFormVisible = true; //document.getElementById("myform").scrollTop = 0;
this.$refs.box.scrollTop = 0; } }
上面兩種方法都是直接報錯,后來才知道是獲取不到元素。因為dialog在初始的時候沒有加載,自然調用不到,當dialog顯示時,需要用到nextTick,使dom更新之后再調用。就可以調用到了。
修改后代碼如下:
methods(){ handleBtnclick(){ this..dialogFormVisible = true; this.$nextTick(() => { // this.$refs.box.scrollTop = 0;
document.getElementById("myform").scrollTop = 0; }); } }
用到 nextTick 之后,獲取id的方法,或者 ref 的方法都可以。