<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循环
时间: 2024-02-15 07:07:35 浏览: 34
可以使用 `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>` 组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)