基于 Vue 的树形选择组件的示例代码


Posted in Javascript onAugust 18, 2017

本文介绍了基于 Vue 的树形选择组件。分享给大家,具体如下:

系统要求:Vue 2

基本特性

  •  完美的多级联动效果
  •  支持无限多的分级
  •  有 全选、半选、不选 三种状态

 截图展示

基于 Vue 的树形选择组件的示例代码

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="icon" href="https://v1-cn.vuejs.org/images/logo.png" rel="external nofollow" type="image/x-icon">
 <title>Vue Tree Select Example</title>
 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>

 <!-- 递归引用的模板 -->
 <template id="one-select" style="display: none;">
  <ul>
   <li v-for="(node, key, index) in tree">
    <div v-if="key != 'selected'">
     <div v-on:click="nodeClick(node, index)" v-bind:class="[node.selected == null ? 'tree-select-null' : (node.selected == 'half' ? 'tree-select-half' : 'tree-select-full'), 'tree-select', 'inline-block']"></div>
     
     <div class="inline-block">{{ key }}</div>
     <div v-if="key != ''">
      <one-select v-bind:tree="node" v-bind:isroot="false"></one-select>
     </div>
    </div>
   </li>
  </ul>
 </template>

 <!-- 整体树容器 -->
 <div id="tree">
  <one-select v-bind:isroot="true" v-bind:tree="tree"></one-select>
 </div>

<textarea id="treeDataJSON" style="display: none;">
{
 "客户管理": {
  "我的客户": {
   "新分配": {},
   "跟进中": {},
   "签单客户": {},
   "长期客户": {}
  },
  "长期客户权限": {
   "设为长期客户": {},
   "还原长期客户": {}
  }
 },
 "采购列表": {
  "添加异常客情": {},
  "添加采购单": {},
  "采购退货单列表": {},
  "供应商管理": {},
  "供应商联系人": {},
  "品牌列表": {
   "宝洁": {},
   "乐视": {
    "乐视网": {},
    "乐视手机": {
     "乐视手机 1": {},
     "乐视手机 2": {},
     "乐视手机 3": {},
     "乐视手机 4": {},
     "乐视手机 5": {
      "体验超深层级": {
       "继续体验超深层级": {
        "依然体验超深层级": {},
        "依然体验超深层级 2": {}
       }
      }
     }
    },
    "乐视电视": {}
   },
   "可口可乐": {},
   "圣象": {}
  }
 }
}
</textarea>

<script>
// 初始数据
var treeDataJSON = document.getElementById("treeDataJSON").value;
var treeData = JSON.parse(treeDataJSON);
Vue.component('one-select', {
 name: 'one-select',
 template: '#one-select',
 props: ['tree', 'isroot'],
 created: function() {
  var realTree = Object.assign({}, this.tree);
  delete realTree.selected;
  if (Object.keys(realTree).length === 0) { // 判断最低级,再刷新父级
   this.refreshAllParentNodes(this.$parent);
  }
 },
 methods: {
  nodeClick: function(node, index) {
   if (node.selected === 'full' || node.selected === 'half') {
    Vue.set(node, 'selected', null);
   } else {
    Vue.set(node, 'selected', 'full');
   }
   this.refreshAllParentNodes(self.$parent);
   this.refreshAllParentNodes(this);
   this.refreshAllSonNodes(this.$children[index], node.selected);
  },
  refreshAllSonNodes: function(node, status) {
   if (node instanceof Vue && node.$children.length) {
    for (index in node.$children) {
     Vue.set(node.$children[index].tree, 'selected', status);
     // 递归计算子级
     this.refreshAllSonNodes(node.$children[index], status);
    }
   }
  },
  refreshAllParentNodes: function(node) {
   if (node instanceof Vue) {
    var status = null;
    var nullCount = 0;
    var halfCount = 0;
    var fullCount = 0;
    for (index in node.$children) {
     if (typeof node.$children[index].tree.selected === 'undefined') {
      nullCount++;
     } else if (node.$children[index].tree.selected === null) {
      nullCount++;
     } else if (node.$children[index].tree.selected === 'half') {
      halfCount++;
     } else if (node.$children[index].tree.selected === 'full') {
      fullCount++;
     }
    }
    if (fullCount === node.$children.length) {
     status = 'full';
    } else if (nullCount === node.$children.length) {
     status = null;
    } else {
     status = 'half';
    }
    Vue.set(node.tree, 'selected', status);

    // 递归计算父级
    this.refreshAllParentNodes(node.$parent);
   }
  },
  log: function(o) {
   console.log(o);
  }
 }
});
vm = new Vue({
 el: '#tree',
 data: {
  tree: treeData
 },
 methods: {
  // 返回最终数据
  getResult: function() {
   return Object.assign({}, this.tree);
  }
 }
});
</script>

<style>
#tree {
 width: 500px;
 margin: 0 auto;
 margin-top: 50px;
}
li {
 list-style: none;
 line-height: 25px;
}
.inline-block {
 display: inline-block;
}
.tree-select {
 width: 13px;
 height: 13px;
 line-height: 16px;
 margin: 3px;
 display: inline-block;
 vertical-align: middle;
 border: 0 none;
 cursor: pointer;
 outline: none;
 background-color: transparent;
 background-repeat: no-repeat;
 background-attachment: scroll;
 background-image: url('selects.png');
}
.tree-select-null {
 background-position: 0 0;
}
.tree-select-full {
 background-position: -14px 0;
}
.tree-select-half {
 background-position: -14px -28px;
}
</style>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
简单实现jQuery手风琴效果
Aug 18 #jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 #Javascript
JavaScript实现旋转轮播图
Aug 18 #Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 #Javascript
ECMAscript 变量作用域总结概括
Aug 18 #Javascript
微信小程序之前台循环数据绑定
Aug 18 #Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 #Javascript
You might like
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
php数组一对一替换实现代码
2012/08/31 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
React快速入门教程
2017/01/17 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python常用小技巧总结
2015/06/01 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
为什么称python为胶水语言
2020/06/16 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
机械绘图员岗位职责
2013/11/19 职场文书
大四学生思想汇报
2014/01/13 职场文书
临床医师个人自我评价
2014/04/06 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
怀念母亲教学反思
2014/04/28 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
爱心助学感谢信
2015/01/21 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python