<el-select v-model.lazy="scope.row.goods_id" clearable filterable :virtual="true" :virtual-list="5"> <el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.value" :value="goods.data" :virtual="true" :virtual-list="5" > </el-option> </el-select>
时间: 2024-02-15 20:26:59 浏览: 71
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
5星 · 资源好评率100%
这段代码使用了 Element UI 的 Select 组件,并开启了懒加载和虚拟滚动的功能。具体来说,使用了以下属性:
- v-model.lazy 绑定了一个变量 scope.row.goods_id,并且设置了懒加载,只有在需要时才会更新变量的值。
- clearable 表示可以清空已选中的选项。
- filterable 表示开启了筛选功能。
- :virtual="true" 表示开启了虚拟滚动。
- :virtual-list="5" 表示每次渲染的选项数量为 5,也就是说,只有可见的 5 个选项会被渲染到页面上。
- v-for 循环渲染了一组商品选项,每个选项的 label 显示了商品的名称,而 value 则表示对应的商品 ID。
- :virtual="true" 和 :virtual-list="5" 也被应用到了 el-option 组件中,表示每次渲染的选项数量为 5,同时也开启了虚拟滚动。
这样可以在大量数据的情况下,提高页面的渲染效率和性能。
阅读全文