elementui下拉菜单组件loading效果

Element UI 的下拉菜单组件（`el-menu`）本身并不直接提供内置的 loading 效果，因为它主要用于导航列表，不是数据加载场景。然而，你可以通过一些组合和自定义的方式来添加 loading 动画。通常的做法是在下拉项触发请求数据时，先显示一个 `v-loading` 或者使用 Element 的 `ElLoading` 组件作为占位，当数据加载完成后再隐藏这个 loading 元素。

例如：

<template>
  <div>
    <el-menu default-active="1" :loading="isLoading">
      <el-submenu v-for="(item, index) in menuList" :key="index" @open="loadData(item)">
        <template slot="title">{{ item.name }}</template>
        <el-menu-item v-if="!isLoading">更多选项...</el-menu-item>
        <el-loading :visible="isLoading" class="menu-loading" spinning text="加载中...">
          <el-menu-item>子菜单内容</el-menu-item>
        </el-loading>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      menuList: ... // 初始化的数据
    };
  },
  methods: {
    loadData(item) {
      this.isLoading = true;
      setTimeout(() => {
        // 模拟异步数据获取
        // 这里可以发送 AJAX 请求或者其他数据操作
        this.isLoading = false;
      }, 2000);
    }
  }
};
</script>

<style scoped>
.menu-loading {
  display: none; /* 初始状态隐藏 */
}
</style>

在这个例子中，当你点击一个子菜单时，`loadData` 方法会被调用并设置 `isLoading` 为 `true`，此时 `menu-loading` 元素会显示出来。数据加载完成后，再将 `isLoading` 设置回 `false` 使其隐藏。