<el-option v-for="sup in supList" :key="sup.supplier_id" :label="sup.supplier_name" :value="sup.supplier_id"> </el-option>不使用for循环
时间: 2023-07-06 18:30:39 浏览: 51
可以使用`v-bind`指令的`items`属性和`template`标签来替代`v-for`循环。示例代码如下:
```
<template v-bind:items="supList">
<el-option :key="item.supplier_id" :label="item.supplier_name" :value="item.supplier_id">
</el-option>
</template>
```
其中,`items`属性绑定了`supList`数组,`template`标签中的子元素会根据`supList`数组中的元素生成相应的选项。需要注意的是,上述代码只适用于Vue.js 3.x版本。
相关问题
<el-select clearable filterable v-model.lazy="scope.row.supplier_id"> <el-option v-for="sup in supList" :key="sup.supplier_id" :label="sup.supplier_name" :value="sup.supplier_id"> </el-option> </el-select>如何使用虚拟渲染
可以在 el-select 标签上添加一个属性 virtual-scroll,它的值为 true,表示开启虚拟滚动。此外,还可以添加其他的虚拟滚动相关的属性,如 item-height 表示每一项的高度,如果每一项的高度不一致,可以使用一个函数返回每一项的高度。代码如下:
```
<el-select clearable filterable v-model.lazy="scope.row.supplier_id" virtual-scroll :item-height="40">
<el-option v-for="sup in supList" :key="sup.supplier_id" :label="sup.supplier_name" :value="sup.supplier_id">
</el-option>
</el-select>
```
在使用虚拟渲染后,el-select 组件只会渲染可见区域的选项,而不是一次性将所有选项都渲染出来,可以提高页面的性能。
<el-select clearable filterable v-model.lazy="scope.row.supplier_id"> <el-option v-for="sup in supList" :key="sup.supplier_id" :label="sup.supplier_name" :value="sup.supplier_id"> </el-option> </el-select>用map替换for循环
可以使用 `Array.prototype.map` 方法替换 `v-for` 循环,下面是示例代码:
```vue
<template>
<el-select clearable filterable v-model.lazy="scope.row.supplier_id">
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
supList: [
{ supplier_id: 1, supplier_name: '供应商1' },
{ supplier_id: 2, supplier_name: '供应商2' },
{ supplier_id: 3, supplier_name: '供应商3' },
],
scope: {
row: {
supplier_id: 2,
},
},
};
},
computed: {
options() {
return this.supList.map((sup) => ({
value: sup.supplier_id,
label: sup.supplier_name,
}));
},
},
};
</script>
```
在上面的代码中,我使用 `options` 计算属性来代替 `supList`,使用 `Array.prototype.map` 方法将 `supList` 转换成 `options`,`options` 数组中的每个元素都包含 `value` 和 `label` 属性,分别对应 `<el-option>` 的 `value` 和 `label` 属性。在模板中,使用 `v-for` 循环 `options` 数组,渲染出 `<el-option>` 组件。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![cpio](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)