vue中写一个简单的三级联动的组件

最新推荐文章于 2025-06-08 11:15:36 发布

原创最新推荐文章于 2025-06-08 11:15:36 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

27 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue中编写一个三级联动的组件。通过父子组件交互，利用applyDataArr数据结构，实现了根据一级、二级选择更新三级选项的功能。适用于多级分类选择场景。

父组件

<three-level :applyDataArr="applyDataArr" :title="title"></three-level>

定义一个applyDataArr 和title变量子组件需要的

注意：这个 applyDataArr 是请求数据的一个大的数组三级联动所需要的所有的数据树状的不是一个下拉框一个数组的

例如：

applyDataArr: [
{
"id":16,
"zid":"1005881907663503360",
"typeName":"吃的",
"depth":0,
"parentId":"0",
"createDate":1528271635000,
"childList":[
{
"id":21,
"zid":"1005955849820487651",
"typeName":"零食类",
"depth":1,
"parentId":"1005881907663503360",
"createDate":1528275939000,
"childList":[
{
"id":23,
"zid":"1005955231345197061",
"typeName":"辣条",
"depth":2,
"parentId":"1005955849820487651",
"createDate":1528275906000,
"childList":[

]
}
]
},
{
"id":22,
"zid":"1005955849820487615",
"typeName":"饭类",
"depth":1,
"parentId":"1005881907663503360",
"createDate":1528275939000,
"childList":[
{
"id":24,
"zid":"1005955231345197067",
"typeName":"大米",
"depth":2,
"parentId":"1005955849820487615",
"createDate":1528275906000,
"childList":[

]
},
{
"id":25,
"zid":"1005955231345191324",
"typeName":"面条",
"depth":2,
"parentId":"1005955849820487615",
"createDate":1528275906000,
"childList":[

]
},
{
"id":26,
"zid":"1005955231345195151",
"typeName":"呷哺",
"depth":2,
"parentId":"1005955849820487615",
"createDate":1528275906000,
"childList":[

]
}
]
}
]
},
{
"id":17,
"zid":"1005889432446205952",
"typeName":"喝的",
"depth":0,
"parentId":"0",
"createDate":1528272090000,
"childList":[
{
"id":18,
"zid":"1005940800255074304",
"typeName":"奶类",
"depth":1,
"parentId":"1005889432446205952",
"createDate":1528275069000,
"childList":[
{
"id":19,
"zid":"1005955231345197056",
"typeName":"酸奶",
"depth":2,
"parentId":"1005940800255074304",
"createDate":1528275906000,
"childList":[

]
}
]
}
]
}
]

子组件

<template>
<div>
<div class="input-box pr">
<span class="label"><em>*</em>{{title}}</span>
<select class="select-long" v-on:change="classifyFirSel($event)" name = "classifyFir" v-model="classifyFir">
<option value="0">请选择</option>
<option :value="item.zid" v-for="(item,index) in applyDataArrs" :key="index">{{item.typeName}}</option>
</select>
<select class="select-long" @change="classifySecSel($event)" name = "classifySec" v-model="classifySec">
<option value="0">请选择</option>
<option :value="item.zid" v-for="(item,index) in applyDataSec" :key="index">{{item.typeName}}</option>
</select>
<select class="select-long" name = "classifyThr" v-model="classifyThr">
<option value="0">请选择</option>
<option :value="item.zid" v-for="(item,index) in applyDataThr" :key="index">{{item.typeName}}</option>
</select>
</div>
</div>
</template>
<script>
export default{
data(){
return {
classifyFir: '',
classifySec: '',
classifyThr: '',
applyDataArrs: this.applyDataArr,
applyDataSec: [],
applyDataThr: []
}
},
props:[
'applyDataArr',
'title'
],
mounted(){
this.classifyFir = '0'
this.classifySec = '0'
this.classifyThr = '0'
},
methods:{
classifyFirSel:function(event){
for(var i = 0;i<this.applyDataArrs.length;i++){
if(event.target.value==this.applyDataArrs[i].childList[0].parentId){
this.applyDataSec = this.applyDataArrs[i].childList
this.classifySec = '0'
this.classifyThr = '0'
}else if(event.target.value == 0){
this.applyDataSec = []
this.applyDataThr = []
this.classifySec = '0'
this.classifyThr = '0'
}
}
},
classifySecSel:function(event){
for(var i = 0;i<this.applyDataSec.length;i++){
if(event.target.value==this.applyDataSec[i].childList[0].parentId){
this.applyDataThr = this.applyDataSec[i].childList
this.classifyThr = '0'
}else if(event.target.value == 0){
this.applyDataThr = []
this.classifyThr = '0'
}
}
}
}
}