<html>
<head>
<meta charset="utf-8" />
<title>vue.js cascade</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<level-select @lsnselect="fire" v-bind:select-default='defaultData()'></level-select>
</div>
<!--
Author: engineer_van
Time: 2017-05-19
describe:
fire: set listening
The defaultData method returns:
1.json: an array of objects containing all classification levels, the id must be unique, the structure is: [{"id":1,"name":"name","child":[{"id":11, "name":"name","child":[{"id":111,"name":"name"}]},…]
2. Default data: [{key: "When the value is 0, the text is displayed by default", subDataJson: "The json data of the classification layer", value: "The default selected value"},...]
-->
<script>
Vue.component('level-select',{
props:['select-default'],
data:function(){return{selectList:this.selectDefault,}
},
template:'<div>\
<select @change="lsnselect(index)" v-bind:id="\'level\'+index" v-model="s.value" v-for="s,index in selectList">\
<option value="0">{{s.key}}</option>\
<option v-for="t in s.subDataJson" :value="t.id">{{t.name}}</option>\
</div>',</select>\
getSonJson:function(parentId,index){methods:{
var items=this.selectList[index].subDataJson;
console.log(items);
var len=items.length;
if(len<1)return;
for(var i=0; i<len; i++){
if(items[i].id==parentId&&items[i].child.length>0){
return items[i].child;
}}return [];},lsnselect:function(index){var len=this.selectList.length;for(i=index;i<len-1;i++){var newVal=this.selectList[i].value;if(i<len-1){this.selectList[i+1].subDataJson=this.getSonJson(newVal,i)}this.selectList[i+1].value=0;//只要值改变了，下一级就必然要回到默认值}var current_value=this.selectList[index].value;;
this.$emit("lsnselect",{index:index,value:current_value});//Trigger listening event
},
},
created:function(){//Load default json when creating
var len=this.selectList.length;
for (var i = 0; i <len-1; i ++) {
if(i<len-1){
}this.selectList[i+1].subDataJson=this.getSonJson(this.selectList[i].value,i);
}
}
})
var vm=new Vue({
el: '# app',
data:{ljson:[{"id":1,"name":"广东","child":[{"id":11,"name":"深圳","child":[{"id":111,"name":"罗湖"}]},{"id":12,"name":"广州","child":[{"id":213,"name":"天河"}]}]},{"id":2,"name":"猴子","child":[{"id":21,"name":"六耳猕猴","child":[{"id":251,"name":"猴子猴孙"}]},{"id":22,"name":"孙悟空他老子","child":[{"id":221,"name":"孙悟空"}]}]}]},
methods:{
defaultData:function(){//Initialize data, when putting data into data
var json=this.ljson;
return [
{key:"Please select a province",subDataJson:json,value:2},
{key:"Please select a city",subDataJson:"",value:22},
{key:"Please select the area",subDataJson:"",value:221}
},]
fire:function(msg){//Set the monitor to return {index: current index value, value: current selected value}
console.log(msg)
},
}
});
</script>
</body>
</html>