vue,基于element的tree组件封装
封装组件代码
// 组件:树
/*
参数说明-属性:
1.treeData:展示数据(array)
2.treeEmptyText:内容为空的时候展示的文本(String)
3.treeNodeKey:每个树节点用来作为唯一标识的属性,整棵树应该是唯一的(String)
4.treeRenderAfterExpand:是否在第一次展开某个树节点后才渲染其子节点(boolean)
5.treeHighlightCurrent:是否高亮当前选中节点,默认值是 false(boolean)
6.treeDefaultExpandAll:是否默认展开所有节点(boolean)
7.treeExpandOnClickNode:是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点(boolean)
8.treeCheckOnClickNode:是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。(boolean)
9.treeDefaultExpandedKeys:默认展开的节点的 key 的数组(array)
10.treeShowCheckbox:节点是否可被选择(boolean)
11.treeCheckStrictly:在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false(boolean)
12.treeDefaultCheckedKeys:默认勾选的节点的 key 的数组(array)
13.treeAccordion:是否每次只打开一个同级树节点展开(boolean)
14.treeIndent:相邻级节点间的水平缩进,单位为像素(number)
15.treeIconClass:自定义树节点的图标(string)
16.treeFilterText:对树节点进行筛选操作(string) 17.treeNodeClickFunName:节点点击回调函数的函数名(示例:@trNodeClick="treeNodeClick" treeNodeClickFunName="trNodeClick")
返回参数:s:有复选框时,选中节点的信息,
a:点击节点在data中对应的对象,
b:节点对应的 Node
18.treeCheckChangeFunName:节点选中状态发生变化时的回调函数的函数名(示例:@trCheckChange="treeCheckChange" treeCheckChangeFunName="trCheckChange")
返回参数:a:传递给 data 属性的数组中该节点所对应的对象,
b:节点本身是否被选中,
c:节点的子树中是否有被选中的节点
说明:现在返回参数报错(TypeError: Cannot read property 'toLowerCase' of undefined)不知道啥原因,暂时不返回
19.treeCheckFunName:当复选框被点击的时候触发回调函数的函数名(示例:@trCheck="treeCheck" treeCheckFunName="trCheck")
返回参数:a:传递给 data 属性的数组中该节点所对应的对象
b:树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 参数说明-事件:
1.node-click:节点被点击时的回调(共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。)
2.check-change:节点选中状态发生变化时的回调(共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点)
3.check:当复选框被点击的时候触发(共两个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性)
*/
<template>
<div>
<el-tree :data="treeData" :empty-text="treeEmptyText" :node-key="treeNodeKey" :render-after-expand="treeRenderAfterExpand" :highlight-current="treeHighlightCurrent" :default-expand-all="treeDefaultExpandAll" :expand-on-click-node="treeExpandOnClickNode" :check-on-click-node="treeCheckOnClickNode" :default-expanded-keys="treeDefaultExpandedKeys" :show-checkbox="treeShowCheckbox" :check-strictly="treeCheckStrictly" :default-checked-keys="treeDefaultCheckedKeys" :accordion="treeAccordion" :indent="treeIndent" :icon-class="treeIconClass" :filter-node-method="filterNode" @node-click="nodeClick" @check-change="checkChange" @check="check" :props="defaultProps" ref="modelTree">
</el-tree>
</div>
</template> <script>
export default {
props: {
treeData: {
type: Array
},
treeEmptyText: {
type: String,
default: '暂无数据'
},
treeNodeKey: {
type: String
},
treeRenderAfterExpand: {
type: Boolean,
default: true
},
treeHighlightCurrent: {
type: Boolean,
default: false
},
treeDefaultExpandAll: {
type: Boolean,
default: false
},
treeExpandOnClickNode: {
type: Boolean,
default: true
},
treeCheckOnClickNode: {
type: Boolean,
default: false
},
treeDefaultExpandedKeys: {
type: Array
},
treeShowCheckbox: {
type: Boolean,
default: false
},
treeCheckStrictly: {
type: Boolean,
default: false
},
treeDefaultCheckedKeys: {
type: Array
},
treeAccordion: {
type: Boolean,
default: false
},
treeIndent: {
type: Number,
default: 16
},
treeIconClass: {
type: String
},
treeFilterText: {
type: String
},
treeNodeClickFunName: {
type: String
},
treeCheckChangeFunName: {
type: String
},
treeCheckFunName: {
type: String
}
},
data () {
return {
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
filterNode (value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
nodeClick (a, b, c) {
if (!this.treeNodeClickFunName || this.treeNodeClickFunName === '') return
let s = this.$refs.modelTree.getCheckedNodes()
this.$emit(this.treeNodeClickFunName, s, a, b)
},
checkChange (a, b, c) {
if (!this.treeCheckChangeFunName || this.treeCheckChangeFunName === '') return
this.$emit(this.treeCheckChangeFunName, a, b, c)
},
check (a, b) {
if (!this.treeCheckFunName || this.treeCheckFunName === '') return
this.$emit(this.treeCheckFunName, a, b)
}
},
computed: {}, mounted: function () { }, watch: {
treeFilterText (val) {
this.$refs.modelTree.filter(val)
}
}
}
</script> <style></style>
父组件调用方式:
<componentsTree
:treeData="treeData"
:treeEmptyText="treeEmptyText"
:treeNodeKey="treeNodeKey"
:treeRenderAfterExpand="treeRenderAfterExpand"
:treeHighlightCurrent="treeHighlightCurrent"
:treeDefaultExpandAll="treeDefaultExpandAll"
:treeExpandOnClickNode="treeExpandOnClickNode"
:treeCheckOnClickNodes="treeCheckOnClickNodes"
:treeDefaultExpandedKeys="treeDefaultExpandedKeys"
:treeShowCheckbox="treeShowCheckbox"
:treeCheckStrictly="treeCheckStrictly"
:treeDefaultCheckedKeys="treeDefaultCheckedKeys"
:treeAccordion="treeAccordion"
:treeIndent="treeIndent"
:treeIconClass="treeIconClass"
:treeFilterText="filterText"
@trNodeClick="treeNodeClick" treeNodeClickFunName="trNodeClick"
@trCheckChange="treeCheckChange" treeCheckChangeFunName="trCheckChange"
@trCheck="treeCheck" treeCheckFunName="trCheck">
</componentsTree>
引入方式:
import componentsTree from '@/utils/Tree/Tree' components: {
componentsTree
} data () {
return {
treeData: [
{
id: 1,
label: '名士豪庭',
children: [
{
id: 4,
label: '1号楼',
children: [
{
id: 9,
label: '名士豪庭-李四',
type: 'person'
},
{
id: 10,
label: '名士豪庭-王五',
type: 'person'
}
]
},
{
id: '1_4',
label: '2号楼',
children: [
{
id: '1_4_9',
label: '名士豪庭-大胖胖',
type: 'person'
},
{
id: '1_4_10',
label: '名士豪庭-栗瀚昂',
type: 'person'
}
]
}
]
},
{
id: 2,
label: '金石晶城',
children: [
{
id: 5,
label: '3号楼',
children: [
{
id: '2_5_9',
label: '金石晶城-卞雨梅',
type: 'person'
},
{
id: '2_5_10',
label: '金石晶城-益振华',
type: 'person'
}
]
},
{
id: 6,
label: '5号楼'
}
]
},
{
id: 3,
label: '黄金国际',
children: [
{
id: 7,
label: '2号楼'
},
{
id: 8,
label: '5号楼',
children: [
{
id: '3_8_9',
label: '黄金国际-阮嘉志',
type: 'person'
},
{
id: '3_8_10',
label: '黄金国际-谷梁静曼',
type: 'person'
}
]
}
]
}
],
treeEmptyText: '暂无数据1',
treeNodeKey: 'id',
treeRenderAfterExpand: true,
treeHighlightCurrent: true,
treeDefaultExpandAll: true,
treeExpandOnClickNode: false,
treeCheckOnClickNodes: false,
treeDefaultExpandedKeys: [1, 3],
treeShowCheckbox: true,
treeCheckStrictly: false,
treeDefaultCheckedKeys: [],
treeAccordion: true,
treeIndent: 9,
treeIconClass: ''
}
}
展示效果:
vue,基于element的tree组件封装的更多相关文章
- vue 基于elment UI tree 组件实现带引导、提示线
实现样式 准备工作,先实现 树状组件的基本样式 <span style="height:500px; display:block; overflow-y:auto;" cla ...
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- vue基于 element ui 的按钮点击节流
vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...
- vue引入百度地图api组件封装(根据地址定位)
Map.vue <template> <div class="Map" :style="{ height: this.height+'px', widt ...
- element之tree组件样式重写
1.改写实现效果: 2.页面代码 <el-tree :data="data" :props="defaultProps" @node-click=&quo ...
- Element中Tree树结构组件中实现Ctrl和Shift多选
在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...
- elementUI下拉树组件封装
使用组件:Popover 弹出框.Tree 树形控件 和 input 输入框 用法: 1.新建一个.vue文件,粘贴以下组件封装的代码(完全可以使用) 2.在页面需要使用下拉树的地方调用即可. (1) ...
- 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
- 手把手教学~基于element封装tree树状下拉框
在日常项目开发中,树状下拉框的需求还是比较常见的,但是element并没有这种组件以供使用.在这里,小编就基于element如何封装一个树状下拉框做个详细的介绍. 通过这篇文章,你可以了解学习到一个树 ...
随机推荐
- Pandas的常见使用方法操作
Series Series是一种类似于一维数组的 对象,由一组数据(各种NumPy数据类型)以及一组与之对应的索引(数据标签)组成. 类似一维数组的对象由数据和索引组成索引(index)在左,数据(v ...
- Android Studio实现登陆注册功能之手机号验证
我们平常写的登陆注册功能,就是很普通的注册一个账号,设置密码,然后登录.这次,想写一个与之前稍微不一样的登陆注册界面,于是想到了手机号验证的方式. 现在我们市面上出现的很多app,都是采用的手机号注册 ...
- CF873F Forbidden Indices 后缀自动机+水题
刷刷水~ Code: #include <cstdio> #include <cstring> #include <algorithm> #define N 200 ...
- C语言 - strcmp和strncmp的编程实现及总结
一.strcmp和strncmp的编程实现及总结 1.strcmp函数的实现 要求: 原型: int strcmp(char *dest,char * src,int n); 头文件:# ...
- TTTTTTTTTTTT 百度之星D map+hash
Problem D Accepts: 2806 Submissions: 8458 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 6 ...
- mysql 链接数满了的错误 ERROR 1040 (HY000): Too many connections
mysql 链接数满了的错误 ERROR 1040 (HY000): Too many connections 第一种处理方式: ./mysql -u root -p 登录成功后执行以下语句查询当前的 ...
- 12.并发编程--Queue
并发编程--Queue Queue - 非阻塞队列 - 阻塞队列 Queue是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为 ...
- Java并发编程的艺术笔记(九)——FutureTask详解
FutureTask是一种可以取消的异步的计算任务.它的计算是通过Callable实现的,多用于耗时的计算. 一.FutureTask的三种状态 二.get()和cancel()执行示意 三.使用 一 ...
- C++入门经典-例3.10-根据输入的字符输出字符串
1:代码如下: // 3.10.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #inc ...
- 【学习】linux环境下nginx文件彻底删除
nginx卸载其实很简单,只需要两步即可完成!第一步:输入以下指令全局查找nginx相关的文件: sudo find / -name nginx* 第二步:删除查找出来的所有nginx相关文件 sud ...