vue2-ztree

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

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

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

安装

npm i vue2-ztree --save

使用

in script:

import tree from "vue2-ztree";

export default {
	components: {
          tree
	},
	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}} | | nodes | ztree 数据 | Array | [] | | treeId | 对应的treeId | string | 'treeDemo' | | hasSearch | 是否有筛选输入框 | Boolean | false | | emptyText | 空数据时 提示语 | string | '暂无数据' | | includeParent | 多选是否包含 组节点 | Boolean | false | | isCheck | 是否是多选 | Boolean | false | | openAll | 是否全部展开 | Boolean | false |

事件

完全移植zTree API事件

$emit事件方法

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

向外暴露方法

| 方法名称 | 说明 | | -------------- | ------------------------------------------------- | | dataEcho | 用于数据回显 | | setData | 重新设置 setting 参数 |

扩展

若 前端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