Vue-tree-check NPM

vue-tree-check

基于 Vue2.0 开发的树形插件；
没有引入第三方库，原生 js 封装，文件小性能不错；
压缩后 js 4.23kb， css 2.11kb；

效果

左InputTreeCheck多选组件，右边TreeCheck下拉框多选框组件

样式简陋，请根据自己需要修改, 或者覆盖。

安装

npm install vue-tree-check --save-dev

引入方式

import {InputTreeCheck, TreeCheck} from 'vue-tree-check'
import 'vue-tree-check/dist/index.css'

API

TreeCheck:

属性	说明	默认
sources	渲染树形结构的数组	[]
onChange	改变选中回调事件	null
topPid	顶级pid	sources 的第一条的Pid

InputTreeCheck:

属性	说明	默认
sources	渲染树形结构的数组	[]
onChange	改变选中回调事件	null
topPid	顶级pid	sources 的第一条的Pid
name	input的name	null

事件

onChange 每次更新CheckBox的状态时候触发, 返还数据。

Usage 使用案例

<template>
    <!--多选列表-->
    <tree-check :sources="sources" :onChange="select" ></tree-check>
    <!--input 下拉框 多选 CheckBox-->
    <input-tree-check :sources="sources" :name="'treeCheck'"></input-tree-check>
</template>
<script>
    // 引入组件
    import {InputTreeCheck, TreeCheck} from 'vue-tree-check'
    import 'vue-tree-check/dist/index.css'

    export default {
        components: {
            InputTreeCheck,
            TreeCheck
        },

        data() {
            return {
                sources: [
                    {id:1, pId:0, name:"全部",  open:true},// open 默认是否显示子选项
                    {id:11, pId:1, name:"综合部"}, // pId 父级的 id id不可以重复不然渲染有问题
                    {id:111, pId:11, name:"综合部-1", value:"综合部-1", checked:true}, // checked 默认是否勾选
                    {id:112, pId:11, name:"综合部-2", value:"综合部-2"},
                    {id:12, pId:1, name:"人力资源"},
                    {id:121, pId:12, name:"人力资源-1", value:"人力资源-1"},
                    {id:122, pId:12, name:"人力资源-2", value:"人力资源-2"},
                    {id:123, pId:12, name:"开发管理"},
                    {id:1231, pId:123, name:"开发管理-1", value:"开发管理-1"},
                    {id:1232, pId:123, name:"开发管理-2", value:"开发管理-2"}
                ],
                ……
            }
        },
        
        methods: {
             select(arr) {
               ……
            }
        }
    }
</script>