vue2 element ui 实现图标下拉选择

在Vue 2中使用Element UI实现图标下拉选择的组件可以通过el-select和el-option配合el-icon来完成。以下是一个简单的例子：

<template>
  <el-select v-model="selectedIcon" placeholder="请选择图标">
    <el-option
      v-for="(icon, index) in icons"
      :key="index"
      :label="icon"
      :value="icon">
      <el-icon :class="icon"></el-icon>
      {{ icon }}
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedIcon: '',
      icons: [
        'el-icon-edit',
        'el-icon-share',
        'el-icon-delete',
        // ... 更多图标类名
      ]
    };
  }
};
</script>

在这个例子中，我们创建了一个el-select下拉选择框，其中包含多个el-option选项。每个选项使用el-icon组件来显示图标，并通过循环渲染icons数组来生成选项。选中的图标类名被绑定到selectedIcon数据属性上，以便在其他地方使用选中的图标。