QilinTree组件

QilinTree组件是一个树形组件，用于展示树形数据结构。

基本使用

<template>
    <QilinTree v-model:treeConfig="treeConfig" ref="treeConfigRef"></QilinTree>
    <el-button @click="confirmSelected">设置选中</el-button>
    <el-button @click="getSelected">获取选中</el-button>
    <el-button @click="cancelSelected">取消选中</el-button>
</template>

<script setup>
import { reactive, ref,onMounted,nextTick } from "vue";

const treeConfigRef  =ref(null);

const confirmSelected=()=>{
    // treeConfigRef.value.setCheckedNodes([{
    //     name: "看守所项目",
    //     id: 11,
    // }]);
    treeConfigRef.value.setCheckedKeys([1],false);
};
const getSelected=()=>{
    const data = treeConfigRef.value.getCheckedKeys();
    const data1 = treeConfigRef.value.getCheckedNodes(false,true);
    console.log(data,data1);
};
const cancelSelected=()=>{
    // treeConfig.itemConfig.defaultCheckedKeys.forEach((item)=>{
    //     treeConfigRef.value.setChecked(item,false,true);
    // });
    treeConfigRef.value.setChecked(1,false,true);
};

const treeConfig = reactive({
    itemConfig: {
        showCheckbox: true,
        nodeKey: "id",
        defaultCheckedKeys:[],
        defaultExpandedKeys:[3]
    },
    props: {
        label: "name",
        children: "children",
    },
    data: []
});

/*
    生命周期等代码区域
*/
onMounted(()=>{
    setTimeout(()=>{
        treeConfig.data = [
            {
                name: "南京冠霆智能科技有限公司",
                id: 1,
                children: [
                    {
                        name: "看守所项目",
                        id: 11,
                    },
                    {
                        name: "拘留所项目",
                        id: 12,
                    },
                    {
                        name: "戒毒所项目",
                        id: 13,
                    },
                    {
                        name: "安康医院项目",
                        id: 14,
                    },
                ],
            },
            {
                name: "亚信安全有限公司",
                id: 2,
                children: [
                    {
                        name: "亚信智网有限公司",
                        id: 21,
                        children: [
                            {
                                name: "SDP零信任项目",
                                id: 211,
                            },
                            {
                                name: "动态应用安全防护系统BSG",
                                id: 212,
                            },
                        ],
                    },
                ],
            },
            {
                name: "苏软科技（南京）有限公司",
                id: 3,
                children: [
                    {
                        name: "云上贵州项目",
                        id: 31,
                    },
                    {
                        name: "红花街道h5项目",
                        id: 32,
                    },
                    {
                        name: "温州市党政机关信息化项目",
                        id: 33,
                    },
                ],
            },
            {
                name: "南京联创智慧城市科技有限公司",
                id: 4,
                children: [
                    {
                        name: "U创办公管理系统",
                        id: 41,
                    },
                    {
                        name: "U创办公小程序",
                        id: 42,
                    },
                ],
            },
        ];
    },1000);
});
</script>

示例：

Props参数

treeConfig object

核心配置项，支持以下参数。

属性名	类型	说明	可选值	默认值
itemConfig	object	树形组件的配置项，详见itemConfig	-	-
props	object	树形组件的属性，详见props	-	-
data	array	树形组件的数据源，详见data	-	-

itemConfig object

属性名	类型	说明	可选值	默认值
showCheckbox	boolean	是否显示复选框	-	false
nodeKey	string	每个树节点用来作为唯一标识的属性	-	id
checkOnClickNode	boolean	是否在点击节点的时候选中节点，默认只有在点击复选框时才会选中节点	-	false
currentNodeKey	string	当前选中的节点	-	-
highlightCurrent	boolean	是否高亮当前选中的节点	-	true
defaultCheckdKeys	array	默认选中的节点key的数组	-	[]
defaultExpendedKeys	array	默认展开的节点key的数组	-	[]
checkStrictly	boolean	是否严格遵循父子不互相关联	-	false
filterNodeMethod	function	树节点过滤方法	(value,data,node)=>{return true/false;}	-
checkChange	function	树节点复选框状态发生变化时触发	(obj,isChecked,isNodeChecked)=>{}	-
currentChange	function	当前选中节点变化时触发的事件	(row,node)=>{}	-
nodeClick	function	树节点被点击时触发	(obj,node,treeNode,event)=>{}	-
check	function	点击节点复选框之后触发	(obj,checkedObj)=>{}	-

props object

树组件的数据配置选项，详见element-plus官网el-tree组件文档。

data array

树组件的数据源。将后台的数据赋值给该属性即可。

Expose

组件的暴露方法。

方法名	类型	回调参数	说明
setCheckedNodes	function	(nodes, leafOnly) 接收两个参数: 1. 要选中的节点对象构成的数组 2. 布尔类型的值 如果设置为 true，将只设置选中的叶子节点状态。 默认值是 false	调用el-tree的setCheckedNodes事件监听-设置目前选中的节点，使用此方法必须设置 node-key 属性
filter	function	(value) 接收一个参数并指定为 filter-node-method 属性的第一个参数	调用el-tree的filter事件监听-过滤所有树节点，过滤后的节点将被隐藏；
setChecked	function	(key/data, checked, deep) 接收三个参数: 1. 要选中的节点的 key 或者数据 2. 一个布尔类型参数表明是否选中. 3. 一个布尔类型的参数，用于指示是否为深层（deep）操作（注意：check-strictly 必须为 false）。	调用el-tree的setChecked事件监听-设置目前树节点的选中状态，使用此方法必须设置 node-key 属性
setCheckedKeys	function	(keys, leafOnly) 接收两个参数: 1. 一个需要被选中的多节点 key 的数组 2. 布尔类型的值 如果设置为 true，将只设置选中的叶子节点状态。 默认值是 false	调用el-tree的setCheckedKeys事件监听-设置目前树节点的选中状态，使用此方法必须设置 node-key 属性
getCheckedKeys	function	(leafOnly) 接收一个布尔类型参数，默认为 false. 如果参数是 true, 它只返回当前选择的子节点数组。	调用el-tree的getCheckedKeys事件监听-若节点可以被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组；
getCheckedNodes	function	(leafOnly, includeHalfChecked) 接收两个布尔类型参数: 1. 默认值为 false. 若参数为 true, 它将返回当前选中节点的子节点 2. 默认值为 false. 如果参数为 true, 返回值包含半选中节点数据。	调用el-tree的getCheckedNodes事件监听-若节点可以被选中 (show-checkbox 为 true), 它将返回当前选中节点的数组；
setCurrentNode	function	(node, shouldAutoExpandParent=true) 1. 待被选中的节点 2. 是否展开父节点	调用el-tree的setCurrentNode事件监听-设置目前树节点的选中状态，使用此方法必须设置 node-key 属性
setCurrentKey	function	(key, shouldAutoExpandParent=true) 1. 待被选节点的 key， 如果为 null, 取消当前选中的节点 2. 是否展开父节点	调用el-tree的setCurrentKey事件监听-设置目前树节点的选中状态，使用此方法必须设置 node-key 属性