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文件。

相关问题

vue3使用element-plus下拉框添加图标

要在element-plus的下拉框中添加图标，可以使用下拉选项的slot来实现。

首先，在下拉选项中添加一个图标元素，可以使用element-plus提供的Icon组件，也可以使用其他的图标库。

例如，我们在下拉选项中添加一个名称为"apple"的图标，代码如下：

<el-select v-model="fruit">
  <el-option v-for="item in fruits" :key="item.value" :label="item.label" :value="item.value">
    <el-icon :class="'icon-' + item.value" slot="prefix"></el-icon>
  </el-option>
</el-select>

其中，fruits是一个数组，每个元素包含一个label和一个value，表示下拉选项的显示文本和值。

在el-icon组件中，使用:class绑定一个动态的class，这个class是根据下拉选项的value属性动态生成的，例如当value为"apple"时，class为"icon-apple"。

最后，在el-option组件中使用slot="prefix"来指定图标显示在选项的前面。

这样就可以在element-plus的下拉框中添加图标了。

element ui 下拉框 如何默认选中第一对象

在 Element UI 中，可以通过设置 `v-model` 和 `options` 属性来实现下拉框的选中和数据绑定。如果要默认选中第一个选项，可以将 `v-model` 绑定到第一个选项的值上。

举例来说，如果下拉框的选项数据为：

options: [
  { value: 'option1', label: '选项1' },
  { value: 'option2', label: '选项2' },
  { value: 'option3', label: '选项3' }
]

则可以将 `v-model` 绑定到 `option1`：

<el-select v-model="selectedOption" :options="options"></el-select>

在 Vue.js 中，可以在 `data` 中初始化 `selectedOption` 的值为 `option1`：

data() {
  return {
    selectedOption: 'option1'
  }
}

这样就可以默认选中第一个选项了。