<el-select clearable filterable v-model.lazy="scope.row.goods_id"> <el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.value" :value="goods.data"> </el-option> </el-select>使用虚拟列表
时间: 2024-02-15 11:07:41 浏览: 87
使用 Vue 实现一个虚拟列表的方法
5星 · 资源好评率100%
在这段代码中,没有直接使用虚拟列表。要使用虚拟列表,需要在 el-select 组件上添加 virtual-scroll 属性,并将其值设置为 true,同时还需要添加 item-height 属性来指定每一项的高度。
修改后的代码如下:
```
<el-select clearable filterable v-model.lazy="scope.row.goods_id" virtual-scroll :item-height="40">
<el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.value" :value="goods.data">
</el-option>
</el-select>
```
在这个例子中,使用了 virtual-scroll 属性来开启虚拟滚动,并且使用了 item-height 属性来指定每一项的高度为 40px。这样可以在渲染大量数据时,只渲染可见区域的部分数据,从而提高页面的性能。
阅读全文