vue实现的树形结构加多选框示例
63 浏览量
2020-10-17
11:00:15
上传
评论
收藏 72KB PDF 举报
vue实现的树形结构加多选框示例实现的树形结构加多选框示例
主要介绍了vue实现的树形结构加多选框,结合实例形式分析了在之前递归组件实现vue树形结构的基础之上再加上多选框功能相关操作技巧,需要
的朋友可以参考下
本文实例讲述了vue实现的树形结构加多选框。分享给大家供大家参考，具体如下：
前面说了如何用递归组件来写vue树形结构，写了树形结构还要在前面加多选框，然后往数组里push选项，并在左边显示出来，然后左边进行拖拽排序，拖拽排
序上一篇文章我已经介绍过了，在这我就不介绍了，如何用阿里巴巴矢量图标库我也有相关文章，也不介绍了，本节主要介绍vue树形结构加多选框，并实现一定
的逻辑，比如全选，单选，全选和单选之间的联动
先看下目录结构
下面我直接贴下代码
首先是首先是pages文件夹中文件夹中tree.vue页面中引用组件页面中引用组件
下面是tree.vue的代码
<template>
<div class = "loginModuel">
<Tree :menus = "menus" :depth = "depth" @selectItem = "selectItem" :actId = "actId" @checkItem = "checkItem"></Tree>
</div>
</template>
<script src = "./index.js"></script>
<style lang = "scss" scoped src = "./index.scss"></style>
然后是tree.vue引入的index.js的代码
import Tree from '../../components/tree/tree';
import axios from 'axios';
export default{
data(){
return{
msg:"这是登录页面",
depth:0,
menus:[],
actId:"",
}
},
components:{
Tree
},
methods:{
//用ajax获取数据
getData(){
return axios.get('/static/json/data.json');
},
// 调用ajax函数
async getTree(){
var last = await this.getData();
if(last.data.code == 1){
this.menus = last.data.data;
//在每一项中添加selectArr和show
this.addShow(this.menus);
}
},
//递归函数在每一项中添加selectArr和show
addShow(arr){
for(var i = 0; i < arr.length;i++){
this.$set(arr[i],"show",true);
this.$set(arr[i],"selectArr",[]);
if(arr[i].userList && arr[i].userList.length > 0){
this.addShow(arr[i].userList)
}
}
},
//点击箭头使树展开收缩
selectItem(data){
if(data.userList && data.userList.length > 0){
//如果此项下有userList且length大于0，则切换展开与折叠状态
data.show = !data.show;
}else{
//如果此项下没有userList或length等于0，则将选中的id赋值给actId
this.actId = data.id;
}
},
//进行多选勾选
checkItem(data){
if(data.selectArr.length > 0){
//如果这一项的selectArr有值，说明是被勾选状态，要把selectArr清空，清空勾选
data.selectArr = [];
//如果此选项清空勾选后，如果下面有userList的话，那么也同时要清空
if(data.userList && data.userList.length > 0){
this.clearChild(data.userList);
}
//如果此选项清空勾选后，要把所有的父元素，也全部清空勾选，因为它不勾选了，所有父元素的状态不可能还处于勾选状态，不管它勾选不勾选，我们都要清除一遍，以防万一
this.clearFather(this.menus,data);
}else{//如果这一项的selectArr为[]，说明是未被勾选状态，在selectArr里加id值，添加勾选
data.selectArr.push(data.id);
//如果此选项清空勾选后，如果下面有userList的话，那么也同时勾选下面所有的孩子
if(data.userList && data.userList.length > 0){
this.addChild(data.userList);
}
//如果此选项勾选后，要判断所有的上级元素是不是应该全部打勾
this.selectFather(this.menus,data);
}
},
资源评论
