基于 Vue 的树形选择组件的示例代码
本文介绍了基于 Vue 的树形选择组件。分享给大家，具体如下：
系统要求：Vue 2
基本特性
- 完美的多级联动效果
- 支持无限多的分级
- 有 全选、半选、不选 三种状态
截图展示
代码如下：
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta
-
Vue组件tree实现树形菜单
vue 编写的树形菜单,小巧实用,支持vue1.0,vue2.0 v1.0 功能: 1.支持多级树目录 2.支持高亮点击的节点 3.支持展开点击节点 4.支持点击收缩节点时收缩所有子目录 5.支持自定义回调函数,点击节点时回调,参数为节点信息 用法:<launch-tree :list='list' :options='options'></launch-tree> list = [ { name: '一级目录', // 目录名字 isOpen: true, // 是否初始展开目录
-
vuejs使用递归组件实现树形目录的方法
上篇文章我提到了通讯录的开发,里面的目录使用了vue的递归组件实现的树形目录,这篇文章就来讲讲如何实现树形目录吧! 首先实现效果如下,觉得菜单还是比较nice的是吧: 这边数据调用的是数据库的数据的,需要数据库进行数据的构造,这里涉及到java的构造多叉树的知识,后续我会另外写一篇文章详细讲解,这里讲下前端. 数据可以先构造json使用,这里用到的格式大概如下,以childList来嵌套子菜单: { id:YH, name:银行, pid:0, childList:[{ id:YH******,
-
Vue2组件tree实现无限级树形菜单
一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst
-
Vue2递归组件实现树形菜单
今天看了老长时间递归组件,官方给的教程太简便了,根本看不出到底怎么用.于是自己查网摸索了一下,这儿只把核心思想写出来. 效果如下图,点击后打开二级菜单,再点击后打开三级. //js //引子 //思想:当v-if='false'时,循环时进行的.所以一开始就设置为false. ggg:{ name:'gs', template:` <div> <p @click.stop='show=!show'>我是p标签</p> //这儿show必须要初始值为false,不然就是堆
-
Vue.js 递归组件实现树形菜单（实例分享）
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m
-
vue.js树形组件之删除双击增加分支实例代码
html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&
-
Vue.js组件tree实现无限级树形菜单
分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c
-
基于 Vue 的树形选择组件的示例代码
本文介绍了基于 Vue 的树形选择组件.分享给大家,具体如下: 系统要求:Vue 2 基本特性 完美的多级联动效果 支持无限多的分级 有 全选.半选.不选 三种状态 截图展示 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="https://v1-c
-
基于Vue实现树形穿梭框的示例代码
Vue 项目里面需要一个树形的穿梭框,但是 elementUI 和 ant-d 组件库的穿梭框组件效果都不是很好,因为源列表和目标列表都是需要树形结构的,所以说这个就很难搞,但是也不怕,因为大佬太多了,有插件可以提供给我们使用,接下来介绍一下这个插件. 树形穿梭框插件 el-tree-transfer 这个插件很好的实现了vue项目树形穿梭框的功能. 安装链接 上面的连接是npm插件地址,安装步骤也很简单. npm install el-tree-transfer --save 或者 npm i
-
Python基于React-Dropzone实现上传组件的示例代码
目录 实例演示 1. axios上传普通文件: 2. 大文件导入: 结语 这次我要讲述的是在React-Flask框架上开发上传组件的技巧.我目前主要以React开发前端,在这个过程中认识到了许多有趣的前端UI框架--React-Bootstrap.Ant Design.Material UI.Bulma等.而比较流行的上传组件也不少,而目前用户比较多的是jQuery-File-Upload和Dropzone,而成长速度快的新晋有Uppy和filepond.比较惋惜的是Fine-Uploader
-
VUE 记账凭证模块组件的示例代码
效果如下所示: <template> <div class="voucher-container"> <div class="voucher_header"> <div class="voucher_header_title">记账凭证</div> <div class="voucher_header_number">单据号: {{voucher.numb
-
vue 开发一个按钮组件的示例代码
最近面试,被问到一个题目,vue做一个按钮组件: 当时只是说了一下思路,回来就附上代码. 解决思路: 通过父子组件通讯($refs 和 props) props接受参数, $refs调用子组件的方法 来达到点击提交改变按钮状态,如果不成功则取消按钮状态 在src/components/ 下建一个button.vue <template> <!-- use plane --> <!-- 传入bgColor改变按钮背景色 --> <!-- state切换button的
-
基于vue的换肤功能的示例代码
最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的.想着写一篇文章,来写一写实现过程中遇到的一些问题. 项目github地址 项目github地址 一 先看一下实现效果吧 设置主题颜色 讲道理这么一个功能,我觉得这么几点可以说下,分步实现: 1. 色值的选取 2. scss 的一些小众用法(多变量CSS值的批量设置) 3. 全局事件巴士的应用 1 色值的选取和原则 推荐大家看下蚂蚁金服的设计指引,里面对常见的交互和界面设计有一套不错的指引和建议,喜欢看书的也可以
-
vue的一个分页组件的示例代码
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.具体如下: 文件page.vue为一个pc端的分页组件,基础的分页功能都有,基本的思路是,页面是用数据来展示的,那就直接操作相关数据来改变视图 Getting started import Page from './page.vue' 从目录引入该文件,在父组件注册使用 复制代码 代码如下: <page :total='total' :current-index="
-
使用vue实现一个电子签名组件的示例代码
在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名.今天我们就要用vue实现一个电子签名的面板 想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canvas实现了一个前端生成图形验证码的组件,被吐槽不够安全,那么这个电子签名组件想必不会被吐槽了吧~ canvas <canvas> 标签是 HTML 5 中的新标签. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. canvas标签本身是没有绘图能力的,所有的绘制工作必须
-
vue开发树形结构组件（组件递归）
本文实例为大家分享了vue开发树形结构组件的具体代码,供大家参考,具体内容如下 需求 一个页面,要显示商品分类,同时每个分类下面还拥有若干子类,子类也可以有子类. 要实现全选单选,子类被逐个全选父类也要标记选中. 第一反应就是树形结构,和递归调用.曾经在做WPF时记得有现成的组件,也学着写过对应的后台.这次我要自己写一个前端的组件了. 这只是我自己花了点时间写的一个vue组件,尚可优化及拓展.仅此与大家分享一下. 效果 实现 <template> <div id="TreeMe
-
vue开发树形结构组件(组件递归)
本文实例为大家分享了vue开发树形结构组件的具体代码,供大家参考,具体内容如下 需求 一个页面,要显示商品分类,同时每个分类下面还拥有若干子类,子类也可以有子类. 要实现全选单选,子类被逐个全选父类也要标记选中. 第一反应就是树形结构,和递归调用.曾经在做WPF时记得有现成的组件,也学着写过对应的后台.这次我要自己写一个前端的组件了. 这只是我自己花了点时间写的一个vue组件,尚可优化及拓展.仅此与大家分享一下. 效果 实现 <template> <div id="TreeMe