我们在开发的时候，有时会遇到类似于三级联动的问题，这时候后端传过来的数据类型为数组包含对象，对象再包含数组，数组再包含对象的层级关系，如下图：
我们要实现的效果类似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>
<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 这样就可以使数据初始化，报错的情况也就消失了
我们在开发的时候，有时会遇到类似于三级联动的问题，这时候后端传过来的数据类型为数组包含对象，对象再包含数组，数组再包含对象的层级关系，如下图：我们要实现的效果类似elementUI中的级联选择器如下图：<template> <div class="hello"> <div class="l div1"> <div v-for="(item , i) in mydata" :class="{mycolor : i == num1}" @click
嵌套对象的校验
项目中使用的vue+elementUI进行开发，已经用了有一段时间了，感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下，先通过前端校验，校验不通过不发送请求，直到满足校验规则，再发送请求给后端，从而提升用户体验。
elementUI对表单的校验有自己的方法，要求传入model的必须为一个对象。但如果数据结构比较复杂，对象里面又嵌套对象，该如何校验？本文给出多层对象嵌套的方法。
example
<template>
<el-form :model=formData :rules=formRule ref=formData lab
1、现在是父组件请求，套用子组件请求， 当父组件请求完成之后，返回的都是Promise对象，使用循环 ，将父组件返回的Promise对象存到一个新的数组中。
2、再使用 es6 中的Promise.all（）将数组中的Promise对象解析出来，这次他就会是你想要的
数据了， 不管是顺序还是内容。在渲染的时候 需要这样搞一下
如下代码,将myringList里的数据循环遍历出来,子元素Type=7的,就将这个元素push进movieList数组的data属性中,这种方法数据视图是不会更新的
this.myRingList.forEach(function(item){
if(item.Type==7){
this.movieList.data.push(item)
}else{
this.musicList.data.push(item)
这是可以创建
MVVM架构模式
MVVM的简介
MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表
数据模型，也可以在Model中定义
数据修改和操作的业务逻辑；View 代表UI 组件，它负责将
数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构...
