vue-super-tree-parents v1.0.30

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" />

属性

事件

完全移植zTree API事件

$emit事件方法

向外暴露方法

扩展

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