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`赋一个值，使其在刷新后能够展示相应的图标。