如何使用v-for渲染三层的级联菜单,举个例子
时间: 2023-10-24 16:16:02 浏览: 44
可以使用嵌套的 v-for 来渲染三层级联菜单。例如:
```
<template>
<div>
<select v-model="selected1" @change="onChange1">
<option value="">请选择</option>
<option v-for="item1 in list1" :value="item1.value">{{ item1.label }}</option>
</select>
<select v-model="selected2" @change="onChange2">
<option value="">请选择</option>
<option v-for="item2 in list2" :value="item2.value">{{ item2.label }}</option>
</select>
<select v-model="selected3">
<option value="">请选择</option>
<option v-for="item3 in list3" :value="item3.value">{{ item3.label }}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
selected1: '',
selected2: '',
selected3: '',
list1: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
],
list2: [],
list3: [],
};
},
methods: {
onChange1() {
// 根据第一层选项更新第二层选项
// 省略代码
},
onChange2() {
// 根据第二层选项更新第三层选项
// 省略代码
},
},
};
</script>
```
以上代码中,`list1` 是第一层的选项,`list2` 和 `list3` 是第二层和第三层的选项,`selected1`、`selected2` 和 `selected3` 分别是三个选择框选中的值。当第一层选项改变时,会触发 `onChange1` 方法更新第二层选项,当第二层选项改变时,会触发 `onChange2` 方法更新第三层选项。
相关推荐
![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)
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)