Element UI 的模糊查询怎么实现虚拟滚动
时间: 2023-12-04 20:19:54 浏览: 125
监听element-ui table滚动事件的方法
Element UI 的 Select 组件在 2.9.0 版本开始支持了虚拟滚动。要实现虚拟滚动,你需要按照以下步骤进行设置:
1. 在 Select 组件中添加 `virtual-scroll` 属性,表示启用虚拟滚动。例如:
```html
<el-select v-model="value" :virtual-scroll="true">
<!-- options -->
</el-select>
```
2. 设置 `virtual-item-size` 属性,表示每个选项的高度。例如:
```html
<el-select v-model="value" :virtual-scroll="true" virtual-item-size="40">
<!-- options -->
</el-select>
```
3. 设置 `virtual-slot-visible` 属性,表示可见的选项数。例如:
```html
<el-select v-model="value" :virtual-scroll="true" virtual-item-size="40" virtual-slot-visible="10">
<!-- options -->
</el-select>
```
在以上例子中,每个选项的高度是 40 像素,可见的选项数是 10 个。这样就可以实现虚拟滚动了。需要注意的是,虚拟滚动只适用于下拉框模式,不适用于弹出框模式。
阅读全文