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