element中实现下拉框点击选中，然后显示图标

要实现下拉框点击选中，然后显示图标，可以通过以下步骤进行：

1. 首先，在下拉框的选项中添加图标。可以使用HTML中的`<i>`标签来实现，例如：

<select>
  <option value="1"><i class="fa fa-home"></i> Home</option>
  <option value="2"><i class="fa fa-plane"></i> Travel</option>
  <option value="3"><i class="fa fa-camera"></i> Photography</option>
</select>

2. 然后，在CSS中定义下拉框选中时显示图标的样式，例如：

select option:checked i {
  display: inline-block;
}

这样就可以在下拉框选中时显示图标了。

注意，这里使用了Font Awesome图标库中的图标，需要先引入相关的CSS文件。

相关问题

el-select下拉框实现选中图标在左侧并回显图

在Element UI的`el-select`组件中，要实现选中选项的图标位于左侧并且在页面刷新后能正常显示选中图标的状态，你需要按照以下步骤操作：

1. **设计选项格式**：
将每个选项设计成一个包含标签和图标的对象，比如这样：

   data() {
     return {
       options: [
         { value: 'option1', label: '选项1', icon: 'ico1' },
         { value: 'option2', label: '选项2图标', icon: 'ico2' },
         // ...
       ],
       selectedOption: {} // 初始化默认选中项
     }
   }

2. **模板修改**：
在`el-option`的模板上，使用`<span>`标签将图标放在选项前面，同时使用`:class`属性来动态控制图标的位置和显示：

   <el-option
     v-for="item in options"
     :key="item.value"
     :label="<span>{{ item.label }} <i :class='{'selected': item.value === selectedOption.value}' :style='{color: selectedOption.value === item.value ? 'red' : ''}'></i></span>"
     :value="item.value"
     :disabled="item.disabled"
   ></el-option>

这里假设你想让选中的图标变为红色。

3. **CSS样式**：
编写一些基本的CSS规则，比如`.selected`类用于选中图标样式：

   .selected {
     color: red;
     cursor: pointer;
   }

4. **状态管理**：
通过`v-model`双向绑定`selectedOption`，当用户改变选择时，更新数据以反映当前的选择：

   methods: {
     selectItem(item) {
       this.selectedOption = item;
     }
   },
   watch: {
     selectedOption(newVal, oldVal) {
       if (newVal && newVal !== oldVal) {
         this.selectItem(newVal);
       }
     }
   }

5. **初始化选中状态**：
初始化时，确保给`selectedOption`赋一个值，使其在刷新后能够展示相应的图标。