ElementPlus 组件中的 el-tree 属性

embedded/2024/12/26 21:43:49/

文章目录

    • 样式
    • 模板

el-tree 组件跳转: 点击跳转

样式

在这里插入图片描述

模板

  1. html
javascript"><!-- 左侧树形列表 -->
<a-col :span="4"><a-card class="card-height"><template #title><a-input-searchstyle="width: 90%"placeholder="请输入关键字进行搜索"@input="handleSearchTree"/></template><template #extra><a-link @click="handleAdd"><icon-plus /> 添加 </a-link></template><a-spin :loading="loading" style="width: 100%; height: 100%"><a-scrollbar style="height: 640px; overflow: auto"><a-empty v-if="!treeData.length" /><el-treev-elseref="treeRef":data="treeData"style="max-width: 243px"show-checkboxnode-key="id"default-expand-all:props="{children: 'children',label: 'cameraName',}":default-checked-keys="defaultKey":filter-node-method="filterNode":expand-on-click-node="false"@check="handleClickNode"><template #default="{ node, data }"><span class="custom-tree-node"><span><icon-folder style="font-size: 16px; margin-right: 1px" />{{ node.label }}</span><span><icon-editstyle="font-size: 16px;color: rgb(80, 210, 102);margin-right: 5px;"@click="handleEditNode(data)"/><icon-plusv-if="data.nodeType == '区域'"style="font-size: 16px;color: rgb(59, 90, 252);margin-right: 5px;"@click="handleAddNode(data)"/><a-popconfirmcontent="确定要删除"@ok="handleDelete(data)"><icon-deletestyle="font-size: 16px; color: rgb(245, 78, 78)"/></a-popconfirm></span></span></template></el-tree></a-scrollbar></a-spin></a-card></a-col>
  1. js
javascript">/*** @description : 左侧设备列表树* @author : 'Hukang'* @param : ''* @date : 2024-12-20 18:08:25*/
const treeData = ref([]); //树的列表信息
const loading = ref(true); // 加载中状态
const defaultKey = ref([]);
// 获取左侧列表
function getDirData(structId) {defaultKey.value.length = 0;loading.value = true;get_camera_tree(structId).then((res) => {if (res.code == 200) {loading.value = false;treeData.value = res.data;// 添加随机ID到树中的每个节点for (let index = 0; index < treeData.value.length; index++) {const element = treeData.value[index];addRandomIDToTree(element);}defaultKey.value.push(res.data[0]?.id); // 默认选中节点} else {Message.info(res.msg);setTimeout(() => {loading.value = false;}, 2000);}});
}// 树节点添加随机 key,生成随机ID的函数
function generateRandomID() {return Math.random().toString(36).substr(2, 9); // 生成一个长度为 9 的随机字符序列作为ID
}
// 遍历并添加随机ID的函数
function addRandomIDToTree(root) {if (!root) {return;}root.idKey = generateRandomID(); // 给当前节点添加随机IDif (root.children) {// 递归遍历子节点for (let child of root.children) {addRandomIDToTree(child);}}
}
// 添加子节点树
const parentId = ref();
function handleAddNode(data) {formArea.value = {};checkedKeys.value.length = 0;parentId.value = data.id;visible.value = true;titleTxt.value = '添加摄像机';formArea.value.nodeType = '摄像机';
}// 删除
function handleDelete(data) {delete_camera(data.id).then((res) => {if (res.code == 200) {Message.success('删除成功');fetchData();}});
}const visible = ref(false);
const titleTxt = ref();
// 重命名
function handleEditNode(data) {formArea.value = {};get_camera_id(data.id).then((res) => {if (res.code == 200) {formArea.value = res.data;} else {Message.error(res.msg);}});titleTxt.value = '编辑';visible.value = true;
}
// 树节点搜索
const treeRef = ref();
const filterNode = (value, data) => {if (!value) return true;return data.cameraName.includes(value);
};
function handleSearchTree(data) {treeRef.value!.filter(data);
}const flag = ref('');
function handleClickNode(id, e) {console.log(id.cameraName, e.checkedKeys);
}

http://www.ppmy.cn/embedded/143232.html

相关文章

基于Matlab地形和环境因素的森林火灾蔓延模拟与可视化研究

森林火灾的蔓延受多种因素的影响&#xff0c;包括地形、气候条件、植被类型等。为了更好地理解火灾蔓延的动态过程&#xff0c;本文提出了一种基于地形和环境参数的森林火灾蔓延模拟方法。通过综合考虑海拔高度、湿度、温度和风速等因素&#xff0c;我们使用 MATLAB 编写了一种…

Scala 的match case 匹配元组

object test2 {//match case 匹配元组def main(args: Array[String]): Unit {// val d1 (1,2,3)val d1 (1,2,3,4) // val d1 (1,2,3,4,5)val d: Any d1 //d的类型是Anyd match {case (x,y,z) > println(s"这是一个有三个元素的元组&#xff0c;它的第二个元…

ElasticSearch 与向量数据库的结合实践:突破亿级大表查询瓶颈20241204

&#x1f4a1; ElasticSearch 与向量数据库的结合实践&#xff1a;突破亿级大表查询瓶颈 &#x1f4da; 引言 随着业务规模的不断扩大&#xff0c;传统关系型数据库在处理 亿级大表 时&#xff0c;性能瓶颈愈加凸显。关键词检索、模糊查询、多条件筛选等需求逐步升级&#xff…

深度学习Python基础(2)

二 数据处理 一般来说PyTorch中深度学习训练的流程是这样的&#xff1a; 1. 创建Dateset 2. Dataset传递给DataLoader 3. DataLoader迭代产生训练数据提供给模型 对应的一般都会有这三部分代码 # 创建Dateset(可以自定义) dataset face_dataset # Dataset部分自定义过的…

开发者如何使用GCC提升开发效率Opencv操作

看此篇前请先阅读 https://blog.csdn.net/qq_20330595/article/details/144134160?spm=1001.2014.3001.5502 https://blog.csdn.net/qq_20330595/article/details/144134160?spm=1001.2014.3001.5502 https://blog.csdn.net/qq_20330595/article/details/144216351?spm=1001…

PHP使用RabbitMQ(正常连接与开启SSL验证后的连接)

代码中包含了PHP在一般情况下使用方法和RabbitMQ开启了SSL验证后的使用方法&#xff08;我这边消费队列是使用接口请求的方式&#xff0c;每次只从中取出一条&#xff09; 安装amqp扩展 PHP使用RabbitMQ前&#xff0c;需要安装amqp扩展&#xff0c;之前文章中介绍了Windows环…

深度学习中的图片分类:ResNet 模型详解及代码实现

深度学习中的图片分类:ResNet 模型详解及代码实现 图片分类是计算机视觉中的一个经典任务,近年来随着深度学习的发展,这一领域涌现了许多强大的模型。其中,ResNet(Residual Network) 因其解决了深度神经网络训练困难的问题而备受关注。本文将介绍 ResNet 模型的基本原理…

ARP、NAT、ICMP、DHCP、RIP、OSPF与BGP这些协议是做什么的?(不敢说最清楚,但绝对通俗易懂)

ARP、NAT、MICP、DHCP、RIP、OSPF和BGP是网络中常见的协议&#xff0c;它们在不同的网络层和应用中扮演着重要角色&#xff1a; 1、ARP&#xff08;地址解析协议&#xff09; &#xff1a; ARP用于将IP地址转换为物理地址&#xff08;MAC地址&#xff09;。当主机需要与另一台…