如何使Vue-element-ui中的el-select组件实现多选选择，当其高度超过100像素时自动显示垂直滚动条?

要在Vue-element-ui中的`el-select`组件实现多选模式并设置自适应高度及垂直滚动条，你可以按照以下步骤操作：

1. **启用多选模式**:
- 首先，在`el-select`标签上添加`multiple`属性，表示多选模式，例如：

   <el-select v-model="selectedItems" multiple>
     <!-- ... -->
   </el-select>

这里的`v-model`绑定的是一个数组，存储用户的所选选项。

2. **设置默认值**:
如果有多项预设选择，可以在Vue实例中初始化`selectedItems`：

   data() {
     return {
       selectedItems: ['选项1', '选项2'] // 初始化选中的项目
     };
   }

3. **高度自适应**:
- 可以使用CSS控制`el-select`的高度，并设置`overflow-y: auto;`以启用滚动条：

   .your-class-name {
     height: 100px;
     overflow-y: auto;
   }

将`.your-class-name`替换为你实际应用中的类名或直接给`el-select`元素加上一个类，如`my-auto-scrollbar`。

4. **响应式高度调整**:
如果需要根据内容动态调整高度，可以利用Vue的计算属性（Computed Property）配合`window.innerHeight`检查高度变化：

   computed: {
     selectHeight() {
       const windowH = window.innerHeight - 20; // 减去一些空间留给其他元素
       if (this.selectedItems.length > this.maxHeight) {
         return Math.min(windowH, this.maxHeight); // 自定义的最大高度限制
       } else {
         return windowH;
       }
     },
     maxHeight: 150 // 或者你想要的最大允许高度
   },

然后将`selectHeight`作为`style`对象的一部分应用到`el-select`上：

   <el-select :style="{ height: selectHeight + 'px' }">
     <!-- ... -->
   </el-select>

现在，当`el-select`的高度超过100像素并且有多项选择时，它会自动显示垂直滚动条。