如何为Bootstrap-Vue中b-form-select的选项容器设置100px的max-height？

要实现点击下拉选择器时，选项容器最大高度固定为100px、超出部分可滚动的需求，只需要给Bootstrap-Vue的下拉菜单容器添加自定义CSS样式即可。Bootstrap-Vue的b-form-select组件展开后的选项列表基于Bootstrap的dropdown-menu类实现，我们可以通过覆盖这个类的样式来达成目标：

/* 自定义下拉菜单高度样式 */
.b-form-select .dropdown-menu {
  max-height: 100px;
  overflow-y: auto;
}

把这段样式添加到你的页面中，就能让下拉选项容器固定最大高度，超出的选项会自动出现垂直滚动条。

以下是完整的可运行代码示例：

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<style>
.b-form-select .dropdown-menu {
  max-height: 100px;
  overflow-y: auto;
}
</style>

<div id="app">
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
  </div>
</div>

<script>
Vue.component('customIcon', { 
  template: `<svg xmlns="http://www.w3.org/2000/svg" width="15.352" height="15.355" viewBox="0 0 15.352 15.355"> <path id="Union_19" data-name="Union 19" d="M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z" transform="translate(27.176 15966.178)" fill="none" stroke="#bbb" stroke-width="0.5"/> </svg>` 
})
new Vue({
  el: "#app",
  data() {
    return {
      selected: null,
      options: [
        { value: null, text: 'Please select an option' },
        { value: 'a', text: 'This is First option' },
        { value: 'b', text: 'Selected Option' },
        { value: { C: '3PO' }, text: 'This is an option with object value' },
        { value: 'd', text: 'This one is disabled', disabled: true },
        { value: 'e', text: 'Sample' },
        { value: 'f', text: 'Sample' },
        { value: 'g', text: 'Sample' },
        { value: 'h', text: 'Sample' },
        { value: 'i', text: 'Sample' },
        { value: 'j', text: 'Sample' },
        { value: 'k', text: 'Sample' },
        { value: 'l', text: 'Sample' },
        { value: 'm', text: 'Sample' }
      ]
    }
  }
});
</script>

修改后，点击下拉选择器时，选项容器会被限制在100px高度内，超过的部分可以通过滚动查看，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Atousa Darabi