只有自己看的懂的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>
只有自己看的懂的vue 二叉树的3级联动的更多相关文章
- 一看就懂的Android APP开发入门教程
一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载 这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤 ...
- mysql取出现在的时间戳和时间时间戳转成人类看得懂的时间
mysql取出现在的时间戳和时间时间戳转成人类看得懂的时间,我们在mysql里面他封装了一个内置的时间戳转化的函数,比如我们现在的时间戳是:1458536709 ,"%Y-%m-%d&quo ...
- 一看就懂的ReactJs入门教程(精华版)
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...
- JavaScript一看就懂(2)闭包
认识闭包之前需要先了解作用域,如果你对作用域还没有足够了解,请移步JavaScript一看就懂(1)作用域 什么是闭包? 我们可以先简单认为:一个函数a定义在另一个函数b里面,这个函数a就是闭包: f ...
- 小学生都看得懂的C语言入门(1): 基础/判别/循环
c基础入门, 小学生也可以都看得懂!!!! 安装一个编译器, 这方面我不太懂, 安装了DEV-C++ ,体积不大,30M左右吧, 感觉挺好用,初学者够了. 介绍下DEV 的快键键: 恢复 Ctrl+ ...
- python中和生成器协程相关的yield from之最详最强解释,一看就懂(四)
如果认真读过上文的朋友,应该已经明白了yield from实现的底层generator到caller的上传数据通道是什么了.本文重点讲yield from所实现的caller到coroutine的向下 ...
- python中和生成器协程相关yield from之最详最强解释,一看就懂(二)
一. 从列表中yield 语法形式:yield from <可迭代的对象实例> python中的列表是可迭代的, 如果想构造一个生成器逐一产生list中元素,按之前的yield语法,是在 ...
- python中和生成器协程相关的yield之最详最强解释,一看就懂(一)
yield是python中一个非常重要的关键词,所有迭代器都是yield实现的,学习python,如果不把这个yield的意思和用法彻底搞清楚,学习python的生成器,协程和异步io的时候,就会彻底 ...
- Windows进程通信之一看就懂的匿名管道通信
目录 进程通信之一看就懂的匿名管道通信 一丶匿名管道 1.1何为匿名管道 1.2创建匿名管道需要注意的事项 1.3 创建匿名管道需要的步骤 1.4代码例子 1.5代码运行截图 进程通信之一看就懂的匿名 ...
随机推荐
- png,jpg,gif这些图片格式解释一下,分别什么时候用,webp呢
gif图形交换格式,索引颜色格式,颜色少的情况下,产生的文件极小,支持背景透明,动画,图形渐进,无损压缩(适合线条,图标等),缺点只有256种颜色 jpg支持上百万种颜色,有损压缩,压缩比可达180: ...
- Python之部分基础知识点汇总
1.三元运算(又称三目运算) 三元运算(又称三目运算),简单条件语句的简写 if a<b: A else: B等价于:A if a<b else B 2.
- 命令查询职责分离(CQRS)模式
参考: http://www.cnblogs.com/yangecnu/p/Introduction-CQRS.html
- leetcode227
class Solution { public: stack<int> OPD; stack<char> OPR; int calculate(int num1, int nu ...
- leetcode35
public class Solution { public int SearchInsert(int[] nums, int target) { ; i < nums.Length; i++) ...
- UI5-文档-4.4-XML Views
将所有UI放到index.html文件将很快导致一个混乱的设置,有相当多的工作在我们前面.我们先用sap.m.Text进行模块化.控件导入专用视图. SAPUI5支持多种视图类型(XML.HTML.J ...
- 【转】UNITY之LUA加密
来自:Lua加密 两种方式:一种用luac,一种用luajit luac加密: 1.lua本身可以使用luac将脚本编译为字节码(bytecode)从而实现加密,去官网下载Lua源代码包(http:/ ...
- 解决IE下载 apk/ipa 变成zip:Android 手机应用程序文件下载服务器 配置解决方法
解决IE apk/ipa变成zip:Android 手机应用程序文件下载服务器 配置解决方法 APK文件其实是zip格式,但后缀名被修改为apk,通过UnZip解压后,可以看到Dex文件,Dex是Da ...
- Hibernate hql 多表查询
String hql="select c from Col c ,UserRole role where c.id=role.columnId and c.id=? and role.use ...
- Mysql 5.8安装报错
1 mysql安装过程中报下面这个错 解决方法:只要将目录改成反斜杠即可. 2 修改密码错误:ERROR 1064 (42000): You have an error in your SQL syn ...