我们在开发的时候,有时会遇到类似于三级联动的问题,这时候后端传过来的数据类型为数组包含对象,对象再包含数组,数组再包含对象的层级关系,如下图:
我们要实现的效果类似elementUI中的级联选择器
如下图:
<template>
<div class="hello">
<div class="l div1">
<div v-for="(item , i) in mydata" :class="{mycolor : i == num1}" @click="nameClick(i)">
<div>{{item.name}}</div>
</div>
</div>
<div class="l div2">
<div v-for="(item1,a) in mydata[num1].selfinform" :class="{mycolor2 : a == num2}" @click="div2Click(a)">
<div>{{item1.age}}</div>
</div>
</div>
<div class="l div3">
<div v-for="(item2) in mydata[num1].selfinform[num2].otherInner">
<div>{{item2.Number}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods:{
nameClick(i){
this.num2 = 0
this.num1 = i
console.log("我是num1的i:" + i)
},
div2Click(a){
this.num2 = a
console.log("我是num2的a:" + a)
}
},
data () {
return {
num1:0,
num2:0,
mydata : [
{
name:'指南',
selfinform:[
{
age:"设计原则",
otherInner:[
{
Number:"一致"
},
{
Number:"反馈"
},
{
Number:"效率"
},
{
Number:"可控"
}
]
},
{
age:"导航",
otherInner:[
{
Number:"侧向导航"
},
{
Number:"顶部导航"
}
]
}
]
},
{
name:'组件',
selfinform:[
{
age:"basic",
otherInner:[
{
Number:"layout布局"
},
{
Number:"color色彩"
},
{
Number:"typography字体"
},
{
Number:"icon图标"
},
{
Number:"button按钮"
},
{
Number:"Radio单选框"
}
]
},
{
age:"form",
otherInner:[
{
Number:"color色彩"
}
]
},
{
age:"data",
otherInner:[
{
Number:"typography字体"
}
]
},
{
age:"notice",
otherInner:[
{
Number:"icon图标"
}
]
},
{
age:"navigation",
otherInner:[
{
Number:"button按钮"
}
]
},
{
age:"others",
otherInner:[
{
Number:"Radio单选框"
}
]
}
]
},
{
name:'资源',
selfinform:[
{
age:"Axure Components",
otherInner:[
{
Number:1873333333311
}
]
},
{
age:"Sketch Templates",
otherInner:[
{
Number:1560088008811,
}
]
},
{
age:"组件交互文档",
otherInner:[
{
Number:18788888888
}
]
}
]
}
]
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
margin: 0;
padding: 0;
}
.div1,.div2,.div3{
border: 1px solid red;
width: 200px;
}
.div1 > div{
text-align: center;
height: 40px;
line-height: 40px;
border-bottom: 1px solid black;
box-sizing: border-box;
}
.div2 > div{
text-align: center;
height: 40px;
line-height: 40px;
border-bottom: 1px solid black;
box-sizing: border-box;
}
.div3 > div{
text-align: center;
height: 40px;
line-height: 40px;
border-bottom: 1px solid black;
box-sizing: border-box;
}
.div2{
border: 1px solid green;
}
.div3{
border: 1px solid blue;
}
.l{float: left;}
.mycolor{
background-color: yellow;
}
.mycolor2{
background-color: cyan;
}
</style>
最终效果:
这里我是使用vue实现的这个效果
具体思路:
首先循环第一层数组,将里面的信息输入到第一列,因为循环的时候可以获取到对应的下标,所以我们可以在第二列循环对应下标中的数据,可以先给其默认值num1 :0,num2 : 0,这样的话,初始状态就会直接显示第一行的数据
之后给第一列的标签添加点击事件,当点击之后根据对应的下标动态修改num1的值,点击事件触发时,第二列渲染的数据就会随着num1的改变而改变
注意:
这里我发现一个问题,指南、组件、资源分别对应的第二列 ,第三列的数据量是不同的,如果我们点击组件时,第二列会显示六条数据,我们点击一下其中的others,这时num2的下标就是5,这时,如果我们再点击指南,因为它的第二列只有两条数据,所以会报错
解决方案:
给nameClick(i)的点击事件中添加this.num2 = 0 这样就可以使数据初始化,报错的情况也就消失了