elementui下拉菜单el-dropdown-menu组件loading效果

Element UI 的下拉菜单 `el-dropdown-menu` 组件本身并不直接提供内置的 loading 效果，它主要用于显示一组可选项供用户选择。如果你想要在下拉菜单打开时显示加载状态，通常需要自定义一些逻辑或者结合第三方库（如 Vue-Cli 中的 Loading 组件）来实现。

下面是一个简单的示例：

<template>
  <div>
    <el-button @click="openDropdown">点击加载</el-button>
    <el-dropdown v-model="dropdownVisible">
      <el-button size="small" :loading="isLoading" class="dropdown-button">加载菜单</el-button>
      <el-dropdown-menu slot="dropdown" :loading="isLoading">
        <el-menu-item v-for="(item, index) in menuItems" :key="index">{{ item }}</el-menu-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dropdownVisible: false,
      isLoading: false,
      menuItems: [],
    };
  },
  methods: {
    openDropdown() {
      this.isLoading = true; // 开始加载
      setTimeout(() => { // 模拟异步数据加载
        this.menuItems = ['选项一', '选项二', '选项三']; // 加载完成
        this.isLoading = false; // 关闭加载状态
      }, 1500);
    },
  },
};
</script>

<style scoped>
.dropdown-button {
  background-color: transparent;
}
</style>

在这个例子中，当点击按钮时，我们会设置 `isLoading` 为 `true`，表示正在加载，然后模拟一个异步操作等待 1.5 秒钟。之后，数据加载完成后，我们将 `isLoading` 设置回 `false`，关闭加载状态，并更新 `menuItems` 数据。