用vue.js寫一個級聯聯動效果
<html>
<head>
<meta charset="utf-8" />
<title>vue.js級聯</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<level-select @lsnselect="fire" v-bind:select-default='defaultData()'></level-select>
</div>
<!--
作者：engineer_van
時間：2017-05-19
描述：
fire：設定監聽
defaultData方法返回：
1.json：一個包含所有分類級別的物件陣列，id必須是唯一的，結構是：[{"id":1,"name":"名稱","child":[{"id":11,"name":"名稱","child":[{"id":111,"name":"名稱"}]},……]
2.預設資料：[{key:"值為0時預設顯示文字",subDataJson:"該分類層的json資料",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});//觸發監聽事件
},
},
created:function(){//建立時載入預設json
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(){//初始化資料，把資料放到data時
var json=this.ljson;
return [
{key:"請選擇省",subDataJson:json,value:2},
{key:"請選擇市",subDataJson:"",value:22},
{key:"請選擇區",subDataJson:"",value:221}
},]
fire:function(msg){//設定監聽返回{index:當前索引值,value:當前選中值}
console.log(msg)
},
}
});
</script></body>
</html>