elmentUI的el-drawer组件在首次触发时加载很慢

场景

el-drawer在首次触发时加载很慢. html结构如下: el-drawer中嵌套了一个form以及一个el-tree组件,el-tree组件中的数据量比较大

<el-drawer
    title="权限修改"
    :visible.sync="drawerShow"
    direction="rtl"
    size="50%"
    ref="drawer"
>
    <el-form ref="editForm" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
    </el-form>
    <!-- 菜单授权 -->
    <el-row :gutter="0">
      <el-col :span="24">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">菜单分配</span>
          </div>
          <el-tree
            ref="menu"
            :expand-on-click-node="false"
            :data="menus"
            default-expand-all
            :default-checked-keys="menuIds"
            :props="defaultProps"
            check-strictly
            @check="handleCheck"
            show-checkbox
            node-key="id"
          />
        </el-card>
      </el-col>
    </el-row>
</el-drawer>

问题分析

猜测第一次触发时el-tree数据太多加载较慢

官网给出的tips:

Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

我想着在open事件中获取一下this.$refs.menu,结果是undefined 不是很理解官网的说法只能去看源码

<section class="el-drawer__body" v-if="rendered">
    <slot></slot>
</section>

发现el-drawer中的slot是由rendered变量控制的 rendered是从Popup混入的

也就是说要想控制el-drawer中的slot加载可以通过this.$refs.drawer.rendered来控制

于是

解决方案

 mounted() {
    // 页面挂载完毕就加载drawer中的dom,否则第一次点击时加载很慢
    this.$refs.drawer.rendered = true;
  },

完美解决