vue2-ztree

vue2-ztree: ：基于ztree封装的 Vue2.x 树形组件，轻松实现海量数据的高性能渲染。

logo logo

vue2-ztree 仅仅是给 ztree3.0 套了一层 Vue 组件的壳。

ztree 在性能优化方面已经做到了近乎极致，感谢 ztree 作者的工作，向您致敬！

安装

npm i vue2-ztree --save

使用

in script:

import { vueTree } from 'vue2-ztree'

export default {
	components: {
        vueTree
	},
	data() {
		return {    
                    searchFrom:{
                        name:'',
                    },
                    treeData:[
                        {
                            id:'1',
                            pId:'',
                            name:'祖父'
                        },
                        {
                            id:'2',
                            pId:'1',
                            name:'父亲'
                        },
                        {
                            id:'3',
                            pId:'1',
                            name:'叔叔'
                        },
                        {
                            id:'4',
                            pId:'2',
                            name:'儿子'
                        },
                        {
                            id:'5',
                            pId:'3',
                            name:'表妹'
                        },
                        {
                            id:'6',
                            pId:'3',
                            name:'表弟'
                        },
                        {
                            id:'7',
                            pId:'4',
                            name:'孙子'
                        },
                        {
                            id:'7',
                            pId:'4',
                            name:'孙子'
                        },
                        {
                            id:'8',
                            pId:'1',
                            name:'大姑'
                        },
                        {
                            id:'9',
                            pId:'8',
                            name:'表哥'
                        },
                    ],
		}
	},
    created() {
        this.$refs.tree2.setData(this.treeData)
    },
    methods: {
        nodeClick(node) {
            this.searchFrom.name = node.name
        },
        checkChange(node) {
            this.searchFrom.name = node.lables.join()
        },
    }
	...

in template:

 <vue-tree ref="tree2" is-check :include-parent="false" open-all @nodeClick="nodeClick" @checkChange="checkChange" />

属性

参数	说明	类型	默认值
setting	ztree 配置	Object	`{view: {showIcon: false}}`
treeId	对应的treeId	string	'treeDemo'
hasSearch	是否有筛选输入框	Boolean	false
emptyText	空数据时提示语	string	'暂无数据'
includeParent	多选是否包含组节点	Boolean	false
isCheck	是否是多选	Boolean	false
openAll	是否全部展开	Boolean	false
dataStructure	简单数据模式（直接传数据列表组件根据父子关机转换成对应json数据）父子对应的数据id idKey(子id) pIdKey(父id) rootPId(用于修正根节点父节点数据，即 pIdKey 指定的属性值。非必填)	Object	{idKey: 'id', pIdKey: 'pId',}

事件

完全移植zTree API事件

$emit事件方法

事件名称	说明
nodeClick	用于捕获节点被点击的事件回调函数
checkChange	用于捕获 checkbox / radio 被勾选或取消勾选的事件回调函数

向外暴露方法

方法名称	说明
dataEcho	用于数据回显
setData	重新设置树结构列表数据

扩展

若前端UI框架时 element-ui from 表单中使用时结合 el-popover 使用可参考一下代码

 <el-form-item label="审批人">
    <el-popover placement="bottom" width="265" trigger="click" @show="treeShow">
        <vue-tree ref="tree2" ischeck :include-parent="false" @nodeClick="nodeClick" @checkChange="checkChange" />
        <el-input
                slot="reference"
                v-model="formInline.user"
                :disabled="true"
                placeholder="请选择审批人"
                size="mini"
        >请选择审批人
        </el-input>
    </el-popover>
</el-form-item>
//注意给 pop加高度
<style >
    .el-popover{
        height: 200px;
        overflow: auto;
    }

</style>

mc 2022109

李梦超 / vue-super-tree-parents

vue2-ztree

安装

使用

属性

事件

$emit事件方法

向外暴露方法

扩展

简介

发行版

贡献者

近期动态

李梦超 / vue-super-tree-parents .gitee-modal { width: 500px !important; }

vue2-ztree

安装

使用

属性

事件

$emit事件方法

向外暴露方法

扩展

简介

发行版

贡献者

近期动态

搜索帮助

李梦超 / vue-super-tree-parents