用vue.js写一个级联联动效果

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>vue.js级联</title><script src="js/vue.

积跬

7621人浏览 · 2017-06-05 13:09:38

积跬 · 2017-06-05 13:09:38 发布

<!DOCTYPE html>
<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>

<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>\

</select>\

</div>',

methods:{

getSonJson:function(parentId,index){
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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^