黑豹程序员-ElementPlus支持树型组件带图标以及icon避坑

效果

在这里插入图片描述

vue代码

参数说明:node当前节点,data当前节点后台传入数据。
el-tree自身不支持图标,需要自己去利于实现,并有个坑,和elementui写法不同。

        <el-col :span="12"><el-form-item label="绑定权限"><el-tree ref="permissTree" :data="dictTreeData" :highlight-current="true" show-checkbox default-expand-all  node-key="value"><template #default="{ node, data }"><span class="custom-tree-node"><el-icon><component :is="data.icon"></component></el-icon> {{node.label}}<span v-if="data.ctype === 3">(按钮)</span><span v-if="data.ctype === 4">(状态)</span></span></template></el-tree></el-form-item></el-col>

el-tree的坑

ElementUI的语法

<span class="custom-tree-node box" slot-scope="{ node, data }">

ElementPlus的语法

<template #default="{ node, data }">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/454005.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker-compose部署laravel项目实战(主机nginx连接项目容器)(详细配置过程)

我用的是主机上的nginx,没有用docker安装nginx&#xff0c; 所以需要先在主机上安装nginx # 更新系统yum sudo yum update# 安装安装包sudo yum install epel-release sudo yum install wget# 安装Nginx sudo yum install nginx #启动 sudo systemctl start nginx #开机自启动…

3D Line Mapping Revisited论文阅读

1. 代码地址 GitHub - cvg/limap: A toolbox for mapping and localization with line features. 2. 项目主页 3D Line Mapping Revisited 3. 摘要 提出了一种基于线的重建算法&#xff0c;Limap&#xff0c;可以从多视图图像中构建3D线地图&#xff0c;通过线三角化、精心…

SAP SHDB VLPOD 录屏带序列号的

考虑到交货单有多种情况 1个行项目 多个数量,需要对应多个序列号 多个行项目,多个数量,需要多个序列号 最终形成的FM如下 FUNCTION ZIF_BDC_VLPOD_RE_S. *"---------------------------------------------------------------------- *"*"本地接口: *…

人脸识别基本流程

人脸识别一般包括&#xff1a;人脸检测、人脸对齐、人脸特征提取和人脸比对四个步骤 人脸检测&#xff1a;检测到人脸的位置人脸对齐&#xff1a;同一个人采集到的不同图像可能呈现出不同的姿态和表情等&#xff0c;这种情况是不利于人脸特征提取的。所以有必要将人脸图像都变…

【go】延迟执行和定时器实现

目录 time.Sleep time.After time.NewTimer time.NewTicker time.Sleep time.Sleep可以实现延时执行 func TestSleep(t *testing.T) {fmt.Println("start time:", time.Now().Format("2006-01-02 15:04:05.000"))time.Sleep(2 * time.Second)fmt.Pri…

网站不收录,与服务器不备案有关吗

随着互联网的快速发展&#xff0c;网站已经成为企业、个人和机构宣传和展示自己的重要平台。然而&#xff0c;许多网站在建设完成后却面临着不收录的问题&#xff0c;这给网站的管理者和拥有者带来了很大的困扰。其中&#xff0c;一些人认为&#xff0c;网站不收录的原因与服务…

2024美赛数学建模C题完整论文教学(含十几个处理后数据表格及python代码)

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了数学建模美赛本次C题目Momentum in Tennis完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 C论文共49页&…

网络原理TCP/IP(5)

文章目录 IP协议IP协议报头地址管理网段划分特殊的IP地址路由选择以太网认识MAC地址对比理解MAC地址和IP地址DNS&#xff08;域名服务器&#xff09; IP协议 IP协议主要完成的工作是两方面&#xff1a; 地址管理&#xff0c;使用一套地址体系&#xff0c;来描述互联网上每个设…

群晖各个型号之间有什么特色和区别

https://www.mi-d.cn/1338 您可以通过编译不同的型号固件来实现你想要的功能特性 DS3622xs、DS3617xs、SA6400 DSM7.x版本开始都支持24个CPU线程&#xff0c;其它的大部分型号都最多只支持8个线程&#xff08;DS918、DS920&#xff09;或16个线程&#xff0c;如果你的CPU核心…

JAVA Web 学习(五)Nginx、RPC、JWT

十二、反向代理服务器——Nginx 支持热部署&#xff0c;几乎可以做到 7 * 24 小时不间断运行&#xff0c;即使运行几个月也不需要重新启动&#xff0c;还能在不间断服务的情况下对软件版本进行热更新。性能是 Nginx 最重要的考量&#xff0c;其占用内存少、并发能力强、能支持…

TPRI-DMP的多级权限维护

一、多级授权维护 1、 多级授权的核心功能是当前用户给自己权限范围内的组织机构中的用户&#xff0c;分配自己权限范围内能看到的角色或删除用户已拥有的角色。 权限范围内的数据通过平台的权限表达式进行控制。在多层公司代码的组织机构中&#xff0c;多级授权功能(管理员角…

TrinityCore安装记录

TrinityCore模拟魔兽世界&#xff08;World of Warcraft&#xff09;的开源项目&#xff0c;并且该项目代码广泛的优化、改善和清理代码。 前期按照官方手册按部就班的安装即可。 注意几点&#xff1a; 1 需要配置Ubuntu22.04版本的服务器或者Debian11 服务器。2 需要使用gi…