element-ui 抽屉打开后自动显示最下方内容

element-ui 抽屉打开后自动显示最下方内容

遇到问题：
抽屉内容太长的情况下，一打开抽屉后总是展示内容最下方。

解决办法：
通过ref定位到抽屉里的dom元素，通过抽屉的open方法使得内容从顶部开始展示

<template>
  <div>
    <!-- 添加或修改题目信息对话框 -->
    <el-drawer ref="drawer" @open="scrollToTop">
      <div class="demo-drawer__content">
        <!-- 超出浏览器高度内容 -->
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 抽屉一打开从内容顶部开始显示
    scrollToTop() {
      this.$nextTick(() => {
        const drawerElement = this.$refs.drawer.$el;
        drawerElement.querySelector('.demo-drawer__content').scrollIntoView({ block: 'start', inline: 'nearest' });
      });
    },
  },
};
</script>

关于scrollIntoView()方法详解与实际运用 可详见scrollIntoView()方法详解与实际运用

​