el-tree组件的父节点半选中状态—(选中和不选中的区别)

news/2024/12/21 2:27:35/

一.不选中父节点

回显数据需要在el-tree组件添加default-checked-keys属性

<template><div><el-button type="primary" @click="handleShowData">回显数据</el-button><el-tree :props="{ children: 'children', label: 'name' }" :data="treeList" show-checkbox node-key="id"@check="checkTree" ref="treeRef" :default-checked-keys="checkedKeysArr" /></div>
</template><script lang="ts">
import { toRefs, reactive, defineComponent, getCurrentInstance, nextTick } from 'vue';
export default defineComponent({setup() {const { proxy }: any = getCurrentInstance();const data = reactive({treeList: [{"id": 1,"name": "一级","pid": 0,"children": [{"id": 68,"name": "二级1","pid": 1,"children": [{"id": 71,"name": "三级1","pid": 68,},{"id": 72,"name": "三级2","pid": 68,}]},{"id": 69,"name": "二级2","pid": 1,"children": []},{"id": 70,"name": "二级3","pid": 1,"children": []}]}],checkedKeysArr: [] as number[],});const checkTree = (curObj: any, objArr: any,) => {console.log("objArr.checkedKeys--", objArr.checkedKeys);data.checkedKeysArr = objArr.checkedKeys}const handleShowData = () => {data.checkedKeysArr = [69, 70]}return {...toRefs(data), checkTree, handleShowData};},
});
</script>

二.选中父节点

1.需要手动回显数据,在el-tree组件移除default-checked-keys属性。

2.当子节点未全部选中时,父节点为半选中状态,将选中的节点数组和半选中的节点数组组合。

const checkTree = () => {let treeDom = proxy.$refs.treeRef;let array = treeDom.getCheckedKeys().concat(treeDom.getHalfCheckedKeys())console.log("array==", array);data.checkedKeysArr = array
}

3.开启父节点半选中需要添加手动回显数据 

const handleShowData = () => {let defaultCheckArr = [69, 70, 1]let treeDom = proxy.$refs.treeRefnextTick(() => {defaultCheckArr?.forEach((v: number) => {treeDom.setChecked(v, true, false)})// 选中的数据const checkedNodes = treeDom.getCheckedNodes()console.log("checkedNodes==", checkedNodes);// 选中的namelet checkedName = checkedNodes.map((node: any) => node.name);console.log("checkedName==", checkedName);})
}


http://www.ppmy.cn/news/1556795.html

相关文章

图的基本概念|存储

图的基本概念 图的定义 图G由顶点集V和边集E组成&#xff0c;记为G&#xff08;V&#xff0c;E) 其中V(G)表示图G中顶点的有限非空集&#xff1b;E&#xff08;G)表示图G中顶点之间的关系&#xff08;边&#xff09;集合。 若V{ v 1 , v 2 , … , v n v_{1},v_{2},\dots,v_{n…

Linux下调试工具:gdb

Windows和Linux下的调试有区别吗&#xff1f; 调试思路上一定是一样的&#xff1b;调试的操作方式有差别(Linux命令行调试&#xff0c;Windows窗口) 1.准备工作&#xff1a; 默认情况下&#xff0c;gdb无法进行对现在发布的程序进行调试(debug / release)。在Linux下用gcc编译…

repmgr集群部署-PostgreSQL高可用保证

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、My…

Kaggler日志--Day9

进度24/12/18 昨日复盘&#xff1a; 补充并解决Day7Kaggler日志–Day7统计的部分问题 今日进度&#xff1a; 继续完成Day8Kaggler日志–Day8统计问题的解答 明日规划&#xff1a; 今天报名了Regression with an Insurance Dataset算是新手村练习比赛&#xff0c;截止时间是2…

clearvoice 语音降噪、语音分离库

参看: https://github.com/modelscope/ClearerVoice-Studio/tree/main ClearVoice 提供了一个统一的推理平台,用于语音增强、语音分离以及视听目标说话人提取。 代码参看: https://github.com/modelscope/ClearerVoice-Studio/tree/main/clearvoice https://github.com/mode…

【Elasticsearch】使用阿里云 infererence API 及 semantic text 进行向量搜索

原作者&#xff1a;Elastic布道师 刘晓国 在之前的文章 “Elasticsearch 开放推理 API 新增阿里云 AI 搜索支持”&#xff0c;它详细描述了如何使用 Elastic inference API 来针对阿里的密集向量模型&#xff0c;稀疏向量模型&#xff0c; 重新排名及 completion 进行展示。在…

【深度学习】论文复现-对论文数据集的一些处理

如何书写伪代码&#xff1a; ref:https://www.bilibili.com/video/BV12D4y1j7Zf/?vd_source3f7ae4b9d3a2d84bf24ff25f3294d107 i14时产出的图片比较合理 import json import os.path from matplotlib.ticker import FuncFormatter import pandas as pd import matplotlib.py…

Moretl非共享文件夹日志采集

免费: 至Gitee下载 教程: 使用说明 用途 定时全量或增量采集工控机,电脑文件或日志. 优势 开箱即用: 解压直接运行.不需额外下载.管理设备: 后台统一管理客户端.无人值守: 客户端自启动,自更新.稳定安全: 架构简单,兼容性好,通过授权控制访问. 架构 技术架构: Asp .net …