el-select 加下拉选项怎么滚动条

对于 `el-select`，你可以使用 `max-height` 属性来限制下拉选项的高度，并在超出高度时显示滚动条。下面是一个示例：

<template>
  <div>
    <el-select v-model="selected" :options="options" :style="{ maxHeight: '200px' }">
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
        // 添加更多选项...
      ]
    };
  }
};
</script>

在上面的示例中，我们将 `max-height` 设置为 `200px`，以便在下拉选项超过这个高度时显示滚动条。你可以根据需要调整 `max-height` 的值。

相关问题

在el-dialog弹窗中，el-select第一次下拉滚动到最底部，关闭弹窗，再次打开弹窗，el-select的滚动条还在最底部，没有重置，该怎么充值滚动条

您可以在 `el-dialog` 的 `beforeClose` 事件中，手动重置 `el-select` 的滚动条，方法如下：

1. 给 `el-select` 添加一个 `ref`，例如：`<el-select ref="mySelect">...</el-select>`
2. 在 `el-dialog` 中添加 `beforeClose` 事件处理函数，例如：

<el-dialog
  ...
  @beforeClose="handleBeforeClose"
>
  ...
</el-dialog>

methods: {
  handleBeforeClose(done) {
    // 获取 el-select 的 $refs
    const mySelect = this.$refs.mySelect;
    // 如果 $refs.mySelect 存在，手动重置滚动条
    if (mySelect) {
      mySelect.$el.querySelector('.el-select-dropdown__wrap').scrollTop = 0;
    }
    // 调用 done() 方法关闭弹窗
    done();
  }
}

这样，每次关闭 `el-dialog` 前，都会手动重置 `el-select` 的滚动条，以确保下一次打开弹窗时，滚动条回到顶部。

popper-append-to-body设置为true时，el-select下拉列表不会随滚动条滚动

当 `popper-append-to-body` 设置为 `true` 时，下拉列表会被插入到 `body` 中，而不再是 `el-select` 的父元素中，因此出现了滚动条不跟随的问题。你可以通过给 `body` 元素添加样式来解决这个问题，例如：

body {
  overflow: auto;
  position: relative;
}

这样就可以让 `body` 元素出现滚动条，并且设置了 `position: relative`，可以避免影响其他元素的布局。

如果你不希望给整个 `body` 添加样式，也可以通过给 `el-select` 组件设置一个父元素，并设置该元素的样式，例如：

<div class="select-container">
  <el-select popper-append-to-body>
    <!-- options -->
  </el-select>
</div>

.select-container {
  height: 200px;
  overflow: auto;
  position: relative;
}

这样，你就可以在 `select-container` 元素中出现滚动条，并且下拉列表也会跟随滚动条滚动了。