只有自己看的懂的vue 二叉树的3级联动
我是在vue做的数据
actions
mutations
state
index页面获取值
传递给子页面
子页面的操作
<template>
<div class='cascade__container'>
<div class='left__container'>
<div class='select__container' v-for='s in deepNum'>
<select class='type__selector' v-model='selectValues[s]' v-if='s==1 || (selectValues[s-1] && selectValues[s-1].children) ' @change='changeHandle(s)'>
<option v-for='t in (s==1?location:selectValues[s-1].children)' :value='t'>{{t.title}}</option>
</select>
</div>
</div>
<div class='right__container'>
<div class='action__container'>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default{
data(){
return{
selectValues: {},
deepNum: 0,
items:[],
}
},
props:['location'],
watch:{
location(val,oldVal){
this.createSelector(val);
},
immediate: true,
deep:true
},
created(){
this.createSelector(this.location);
},
methods: {
createSelector:function(newLocation){
this.deepNum = this.getDeep(newLocation);
for(let i=0;i<this.deepNum;i++) {
this.$set(this.selectValues, i, {});
}
this.selectValues['1'] = this.location[0];
this.selectValues['2'] = this.location[0].children[0];
this.selectValues['3'] = this.location[0].children[0].children[0];
this.$store.commit('filterMonitor', {pid: this.selectValues['3'].id, ids: this.selectValues['3'].monitors});
},
getDeep:function(items){
let level=1;
for(let o=0,len=items.length;o<len;o++){
if(!items[o].children){continue};
let depth = this.getDeep(items[o].children)+1;
level=Math.max(depth,level);
}
return level;
},
changeHandle: function(s) {
if(s == 1){
this.selectValues['2'] = this.selectValues['1'].children[0];
this.selectValues['3'] = this.selectValues['2'].children[0];
}
if(s == 2){
this.selectValues['3'] = this.selectValues['2'].children[0];
}
if(s == 3){
for(let i=s;i<this.deepNum;i++) {
this.$set(this.selectValues, i+1, {});
}
this.$store.commit('filterMonitor', {pid: this.selectValues['3'].id, ids: this.selectValues['3'].monitors});
}
},
}
}
</script>
<style lang='scss' scoped>
.cascade__container {
display:flex;
height:100%;
}
.left__container {
flex : 1;
display : flex;
}
.select__container {
display:flex;
height : 100%;
padding: 5px 10px;
}
.right__container {
width : 300px;
height:100%;
}
.action__container {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
padding-right:20px;
a {
width: 60px;
height: 30px;
line-height: 30px;
display: inline-block;
text-align: center;
border: 1px solid steelblue;
border-radius: 3px;
background-color: steelblue;
color: white;
}
}
.type__selector {
z-index: 10;
width: 130px;
height: 30px;
background: white;
border: solid 1px #CCC;
color: #3A87DB;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0px 0px 2px 0px #ccc;
padding:0 10px ;
&:focus {
outline:0;
}
}
</style>
最新文章
- Strobogrammatic Number
- SQL 之witn as语法
- gcview使用
- RAID 容量计算器
- Linux命令之cut
- 转：what is TWO_TASK
- 圣诞节来了，雪花纷飞的CSS3动画，还不首页用起来
- web前端框架选型
- NSDate常用代码范例
- Centos7下Java开发基本环境搭建
- testNG常用方法
- VUE中使用geetest滑动验证码
- MySQL 中 having 和 where 的区别
- Linux下usb设备驱动详解
- Redis 下载与安装(Windows版)
- Collection集合复习方法回顾
- 2017-2018-2 20155224『网络对抗技术』Exp6：信息搜集与漏洞扫描
- mysql 找不到或无法加载已注册的 .Net Framework Data Provider和Unable to find the requested .Net Framework Data Provider. It may not be installed解决
- Mo2C-tag
- Win窗口坐标二维坐标与OpenGl的世界坐标系的之间的相互转换