vue 3 elemen-plus Dropdown 的el-dropdown-item怎麼使用循環渲染

在 Vue 3 中，你可以使用 v-for 指令来循环渲染 el-dropdown-item 组件。以下是一个示例：

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item in items" :key="item.id" @click="handleItemClick(item)">
        {{ item.name }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ]
    };
  },
  methods: {
    handleItemClick(item) {
      // 处理点击事件
      console.log(item);
    }
  }
};
</script>

在上面的示例中，我们使用 v-for 指令将 el-dropdown-item 组件循环渲染。items 数组包含了要渲染的选项。我们还为每个 el-dropdown-item 组件设置了一个唯一的 key 属性，以帮助 Vue 3 进行性能优化。可以根据实际需求修改 items 数组并在 handleItemClick 方法中处理点击事件。