hdd-select-tree v0.1.1

安装

npm i hdd-select-tree
cnpm i hdd-select-tree

使用

import hddSelectTree from 'hdd-select-tree'
Vue.use(hddSelectTree); 全局注册组件
或者在组件中引入
 components: {
    hddSelectTree,
},

组件使用 例如

<hdd-select-tree  size="small" :defaultKey="editList" :data="dataList" multiple checkClickNode clearable  @getValue="getValue"></hdd-select-tree>

<!-- 勾选的数值 -->
getValue(value) {
    console.log(value);//value 为选中的数组id
},

参数说明

<!-- 组件传参 -->
defaultKey   默认选中的节点key 默认值为 【】
expandClickNode  多选时点击节点展开还是点三角标   默认值为 false
checkClickNode   多选时设置点击节点是否可以选中   默认值为 false
checkStrictly    显示复选框情况下，是否严格遵循父子不互相关联  默认值为 false (父级和子级是否关联 全选功能)
collapseTags  配置多选时是否将选中值按文字的形式展示 多选数值累加 例如（部门 +3）不显示全程  默认值为 false
clearable   配置是否可多选  默认值为 false
size  大小 默认值为 small
width 宽度  默认值为 100%
height 高度  默认值为 300px
data 树得数据  默认值为 【】
obj 树的关联 默认值为  {
                        id: "id", // ID
                        label: "name", // 显示名称
                        children: "childrenList", //子级字段名
                    }
<!-- css select 宽度-->
.hdd-tree-select{
    width: 500px;
}

举个栗子

<template>
     <hdd-select-tree
        :defaultKey="defaultKeyList"
        :data="peopleOptions"
        multiple
        checkClickNode
        clearable
        style="width: 500px"
    ></hdd-select-tree>
</template>
<script>
import hddSelectTree from "hdd-select-tree";
export default({
    name: "hddSelectTree",
    components: {
        hddSelectTree,
    },
    data() {
        return {
            defaultKeyList: [], //适用部门id
            peopleOptions: [],//下拉树的数据
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.defaultKeyList = ["11", "22", "33"];
            this.peopleOptions = [
                {
                    id: "11",
                    name: "部门1",
                    parentId: "0",
                    childrenList: [
                        {
                            id: "22",
                            name: "子部门2",
                            parentId: "11",
                            parentName: "部门1",
                            description: "无",
                        },
                        {
                            id: "33",
                            name: "子部门",
                            parentId: "11",
                            parentName: "部门1",
                        },
                    ],
                },
                {
                    id: "44",
                    name: "测试部门",
                    parentId: "0",
                },
                {
                    id: "55",
                    name: "部门2",
                    parentId: "0",
                    childrenList: [
                        {
                            id: "55",
                            name: "子部门2",
                            parentId: "55",
                            parentName: "部门2",
                        },
                    ],
                },
            ];
        });
    },
    methods: {
        setTreeApply(value) {
            console.log(value);
        },
    },
});
</script>