如何在Vue Element UI的el-select组件中实现在选中选项时显示图标，并保持已选择的图标状态在页面刷新后仍然显示出来？

在 Vue 中，要在 Element UI 的 `el-select` 组件中添加选中项的图标并且保留选中状态，你可以这样做：

1. 首先，在数据里创建一个包含选项和对应图标的数组结构。每个选项可以是一个对象，例如：

data() {
  return {
    options: [
      { value: 'option1', label: '选项1', icon: 'icon1' },
      { value: 'option2', label: '选项2', icon: 'icon2' },
      // 更多选项...
    ],
    selectedOption: {} // 初始化默认选中项
  }
}

2. 然后在模板中，绑定 `v-model` 到 `selectedOption`，并在每个 `<el-option>` 上设置 `label`、`value` 和 `item-class`（用于添加自定义样式），以及图标作为 `custom-tag` 或者直接在 `label` 中嵌入：

<template>
  <el-select v-model="selectedOption" clearable @change="handleSelectChange">
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="`${item.label} <i class='your-icon-class' :class='{active: item.value === selectedOption.value}'></i>`"
      :value="item.value"
      :item-class="{ active: item.value === selectedOption.value }"
      custom-tag
    ></el-option>
  </el-select>
</template>

这里假设你已经有了一个名为 `your-icon-class` 的 CSS 类，它定义了选中和未选中时的图标样式。

3. 当用户更改选中项时，`handleSelectChange` 方法会被触发：

methods: {
  handleSelectChange(value) {
    this.selectedOption = this.options.find(item => item.value === value);
  }
}

4. 页面刷新后，由于 `selectedOption` 数据双向绑定，选中的状态会自动保留。