zoukankan      html  css  js  c++  java
  • elementui 的 el-dialog 里面获取不到dom元素问题,设置表单滚动条到顶部问题

    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 的方法都可以。

  • 相关阅读:
    第四章 网络层协议介绍
    第三章 交换机基本原理与配置
    网络服务综合性测试
    双向秘钥对验证
    DNS分离解析与构建智能DNS服务器
    NFS共享服务
    部署YUM仓库服务
    PXE高效能批量网络装机
    DNS综合实验
    构建DNS主 从服务器
  • 原文地址:https://www.cnblogs.com/smile-fanyin/p/12489777.html
Copyright © 2011-2022 走看看