el-option向上

el-option组件是Element UI中的一个下拉选项组件。要实现向上展开的效果，可以使用el-select组件的popper-append-to-body属性，并将其设置为false。这样，下拉选项将会向上展开而不是向下展开。

示例代码如下所示：

<el-select popper-append-to-body="false">
  <el-option label="Option 1" value="1"></el-option>
  <el-option label="Option 2" value="2"></el-option>
  <el-option label="Option 3" value="3"></el-option>
</el-select>

通过设置popper-append-to-body为false，可以将下拉选项展开的位置更改为向上展开。

相关问题

将el-select中右侧图标改成点击 el-icon-caret-top 不点击展示el-icon-caret-bottom

您可以使用以下的代码来实现将el-select中右侧图标改成点击 el-icon-caret-top 不点击展示el-icon-caret-bottom的效果：

<el-select v-model="value" placeholder="请选择">
  <template #suffix>
    <i class="el-input__icon el-icon-caret-bottom" 
       @click="showOptions = !showOptions"
       :class="{'el-icon-caret-top': showOptions}">
    </i>
  </template>
  <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>

在这个代码中，我们使用了一个template标签来覆盖了el-select默认的右侧图标，并在这个template标签中添加了一个i标签来显示图标。

在这个i标签中，我们使用了@click事件来监听用户点击事件，当用户点击时，我们将showOptions变量的值取反，以此来控制展开或收起下拉选项的状态。

同时，我们还使用了:class指令来动态绑定i标签的class属性，当showOptions为真时，我们将i标签的class属性设置为'el-icon-caret-top'，以此来显示向上的箭头图标；当showOptions为假时，我们将i标签的class属性设置为'el-icon-caret-bottom'，以此来显示向下的箭头图标。