vue实现的树形结构加多选框示例


Posted in Javascript onFebruary 02, 2019

本文实例讲述了vue实现的树形结构加多选框。分享给大家供大家参考,具体如下:

前面说了如何用递归组件来写vue树形结构,写了树形结构还要在前面加多选框,然后往数组里push选项,并在左边显示出来,然后左边进行拖拽排序,拖拽排序上一篇文章我已经介绍过了,在这我就不介绍了,如何用阿里巴巴矢量图标库我也有相关文章,也不介绍了,本节主要介绍vue树形结构加多选框,并实现一定的逻辑,比如全选,单选,全选和单选之间的联动

先看下目录结构

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);
      }
    },
    //定义函数清空所有孩子的勾选
    clearChild(arr){
      for(var i = 0; i < arr.length;i++){
        arr[i].selectArr = [];
        if(arr[i].userList && arr[i].userList.length > 0){
          this.clearChild(arr[i].userList);
        }
      }
    },
    //定义函数添加所有孩子的勾选
    addChild(arr){
      for(var i = 0; i < arr.length;i++){
        arr[i].selectArr.push(arr[i].id);
        if(arr[i].userList && arr[i].userList.length > 0){
          this.addChild(arr[i].userList);
        }
      }
    },
    //定义函数一层一层的往上寻找父元素的userList
    clearFather(father,data){
      for(var i = 0; i < father.length;i++){
        if(father[i].id == data.id){
          //找到data所在的userList为father,然后再通过这个userList找到拥有这个userList的父元素
          this.clearRealFather(this.menus,father);
        }else if(father[i].userList && father[i].userList.length > 0){
          this.clearFather(father[i].userList,data);
        }
      }
    },
    //定义函数根据找到的上层父元素的userList来寻找父元素,并将他们清除勾选
    clearRealFather(menus,arr){
      for(var i = 0; i < menus.length;i++){
        if(menus[i].userList == arr){
          //找到这个拥有userList的父元素后,将此selectArr清空
          menus[i].selectArr = [];
          //找到这个拥有userList的父元素后,再调用clearFather,再进行向上寻找父元素,知道没有父元素为止
          this.clearFather(this.menus,menus[i]);
        }else if(menus[i].userList && menus[i].userList.length > 0){
          this.clearRealFather(menus[i].userList,arr);
        }
      }
    },
    //定义函数一层一层的往上寻找父元素的userList
    selectFather(father,data){
      for(var i = 0; i < father.length;i++){
        if(father[i].id == data.id){
          var arr = [];
          for(var j = 0; j < father.length;j++){
            if(father[j].selectArr.length > 0){
              arr.push(father[i]);
            }
          }
          //判断此数组中是不是所有的selectArr都有值,如果有值,就执行selectRealFather,将上层父元素也勾选
          if(arr.length == father.length){
            this.selectRealFather(this.menus,father);
          }
        }else if(father[i].userList && father[i].userList.length > 0){
          this.selectFather(father[i].userList,data);
        }
      }
    },
    //定义函数根据找到的上层父元素的userList来寻找父元素,并将他们清除勾选
    selectRealFather(menus,arr){
      for(var i = 0; i < menus.length;i++){
        if(menus[i].userList == arr){
          //找到这个拥有userList的父元素后,给selectArr赋值,使其勾选
          menus[i].selectArr.push(menus[i].id);
          //找到这个拥有userList的父元素后,再调用clearFather,再进行向上寻找父元素,知道没有父元素为止
          this.clearFather(this.menus,menus[i]);
        }else if(menus[i].userList && menus[i].userList.length > 0){
          this.selectRealFather(menus[i].userList,arr);
        }
      }
    }
  },
  mounted(){
    this.getTree();
  }
}

然后是树形组件components文件夹中tree.vue的代码

1.tree.vue

<template>
  <ul class = "treeMoudel">
    <li v-for = "(item,index) in menus" :key = "index">
      <!-- 遍历menus,如果传过来的depth等于0,就添加topNode的class,如果不等于0,就添加noTopNode的class -->
      <div :class = "{'itemTree':true,'topNode':depth == 0,'noTopNode':depth != 0,'active':actId == item.id}">
        <!-- 判断如果含有name字段就显示name字段 -->
        <span :style = "transform" v-if = "item.name" :class = "{'topSpan':depth == 0,'noTopSpan':depth != 0}">
          <!-- 如果item有孩子且item.show为false,那么图标为折叠图标 -->
          <i class = "el-icon-caret-right" v-if = "item.userList && item.userList.length > 0 && !item.show" @click = "selectItem(item)"></i>
          <!-- 如果item有孩子且item.show为true,那么图标为展开图标 -->
          <i class = "el-icon-caret-bottom" v-if = "item.userList && item.userList.length > 0 && item.show" @click = "selectItem(item)"></i>
          <i class = "selectBox" @click = "checkItem(item)">
            <!-- 如果item的selectArr.length是大于0的,也就是里面有值的话就是勾选状态,否则就是不勾选状态 -->
            <i :class = "{'checkName iconfont':true, 'gouxuan5':item.selectArr.length > 0}" ></i>
          </i>
          {{item.name}}
        </span>
        <!-- 判断如果含有username字段就显示username字段 -->
        <span :style = "transform" v-if = "item.username" :class = "{'topSpan':depth == 0,'noTopSpan':depth != 0}">
          <!-- 如果item有孩子且item.show为false,那么图标为折叠图标 -->
          <i class = "el-icon-caret-right" v-if = "item.userList && item.userList.length > 0 && !item.show" @click = "selectItem(item)"></i>
          <!-- 如果item有孩子且item.show为true,那么图标为展开图标 -->
          <i class = "el-icon-caret-bottom" v-if = "item.userList && item.userList.length > 0 && item.show" @click = "selectItem(item)"></i>
          <i class = "selectBox" @click = "checkItem(item)">
            <!-- 如果item的selectArr.length是大于0的,也就是里面有值的话就是勾选状态,否则就是不勾选状态 -->
            <i :class = "{'checkUsername iconfont':true, 'gouxuan5':item.selectArr.length > 0}"></i>
          </i>
          {{item.username}}
        </span>
      </div>
      <el-collapse-transition>
        <!-- 递归组件就是自己调用自己,这里是在自己的组件内再次调用自己,但是务必要和pages中的tree页面中使用的一模一样才可以,否则树不会生效 -->
        <Tree v-if = "item.userList && item.userList.length > 0 && item.show" :menus = "item.userList" :depth = "depth+4" @selectItem = "selectItem" :actId = "actId" @checkItem = "checkItem"></Tree>
      </el-collapse-transition>
    </li>
  </ul>
</template>
<script src = "./index.js"></script>
<style src = "./index.scss" lang = "scss" scoped></style>

2.tree.vue中引入的index.js

export default{
  name:"Tree",
  props:["menus","depth","actId"],
  data(){
    return{
      msg:"这是二级菜单树",
    }
  },
  methods:{
    // 将selectItem方法暴露出去
    selectItem(item){
      this.$emit("selectItem",item);
    },
    // 将checkItem方法暴露出去
    checkItem(item){
      this.$emit("checkItem",item);
    }
  },
  computed:{
    //通过传过来的depth计算下级目录的偏移量,这里我用的transform
    transform(){
      return 'transform:translateX(' + this.depth*10 + 'px)';
    }
  }
}

3.tree.vue中引入的index.scss

.treeMoudel{
  li{
    .itemTree{
      width: 100%;
      padding-left:30px;
      position: relative;
      &:hover{
        background:#2B9EEE;
        color:#fff;
      }
      .selectBox{
        display: inline-block;
        width: 16px;
        height:16px;
        border:1px solid #ccc;
        border-radius: 3px;
        position: relative;
        background: #fff;
        top:2px;
        .checkName{
          position: absolute;
          top:-16px;
          left:0px;
          color:#333;
        }
        .checkUsername{
          position: absolute;
          top:-12px;
          left:0px;
          color:#333;
        }
      }
      span{
        display: inline-block;
        position: absolute;
        font-size:14px;
      }
      .topSpan{
        font-size:16px;
      }
      .noTopSpan{
        font-size:14px;
      }
    }
    .topNode{
      height:55px;
      line-height: 55px;
      font-size:16px;
      cursor: pointer;
    }
    .active{
      background:#2B9EEE;
      color:#fff;
    }
    .noTopNode{
      height:45px;
      line-height:45px;
      &:hover{
        background:#2B9EEE;
        cursor: pointer;
        color:#fff;
      }
    }
  }
}

看一下模拟数据的data.json长什么样子吧

{
  "code":1,
  "data":[
    {
      "id":"1.2",
      "name":"技术部",
      "userList":[
        {
          "id":"788d",
          "username":"html",
          "role":"主管"
        },
        {
          "id":"sda",
          "username":"vue",
          "role":"普通"
        }
      ]
    },
    {
      "id":"1.3",
      "name":"策划部",
      "userList":[
        {
          "id":"dsf",
          "username":"jack",
          "role":"主管"
        },
        {
          "id":"asdf",
          "username":"rose",
          "role":"普通"
        }
      ]
    }
  ]
}

至此,一个树形组件加多选框就做好了

下面看下效果图

vue实现的树形结构加多选框示例

vue实现的树形结构加多选框示例

ok,自此这一功能就实现啦,代码讲解我就不写了,注释里写的清清楚楚的,看注释就好啦!

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
vue-cli构建项目下使用微信分享功能
May 28 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
javascript中floor使用方法总结
Feb 02 #Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 #Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 #Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 #Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 #Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 #Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 #Javascript
You might like
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
烹调加工管理制度
2014/02/04 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
建房协议书
2014/04/11 职场文书
党员创先争优心得体会
2014/09/11 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
法人代表证明书
2014/09/18 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
mysql 子查询的使用
2022/04/28 MySQL