element table表格树形数据展示

element table表格树形数据展示

1、效果

在这里插入图片描述

2、代码

 <el-table  ref="pointMultipleTable" border class="table-box" :data="[damActiveObj]"row-key="id" :tree-props="{ children: 'children' }" :expand-row-keys="expandRowKeys"><el-table-column v-for="column in columnAttrs" :key="column.prop" :label="column.label" :prop="column.prop":align="column.align || 'right'" :width="column.width" :show-overflow-tooltip="true"><template slot-scope="{ row }"><span v-if="column.prop === 'evaluateLevelNm'" :style="{color: colors[row['evaluateLevel']]}">{{ row[column.prop] }}</span><span v-else>{{ row[column.prop] }}</span></template></el-table-column></el-table>
const colors = {95: '#1EE36D', // 正常85: '#00F0FF', // 基本正常75: '#FFD600', // 轻度异常65: '#FF6B00', // 异常55: '#FF331D' // 极度异常
}data() {return {colors,columnAttrs: [{label: '指标名称',prop: 'quotaName'},{label: '综合权重',prop: 'quotaWeight',align: 'center'},{label: '最大隶属度',prop: 'evaluateMaxScore',align: 'right'},{label: '安全状态',prop: 'evaluateLevelNm',align: 'center'},{label: '分值',prop: 'evaluateScore',align: 'right'}],expandRowKeys: []}},
 handleSelectDam(item) {// this.expandRowKeys取前面1级this.expandRowKeys = [item.id]},

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

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

相关文章

入门 PyQt6 看过来(项目)在线购物项目说明

本文我们利用pyqt6制作一个在线售卖商品的系统&#xff0c;页面大致如下图效果&#xff1a; ​ 1 项目分析 本项目分为四个模块&#xff1a;主窗口&#xff0c;商品选购&#xff0c;下单结算&#xff0c;销售分析。&#xff08;本文暂不涉及登录&#xff09; 主窗口包含&…

JAVA—正则表达式

关于正则表达式的了解学习&#xff0c;以及用于校验格式&#xff0c;信息查找和替换分割内容。 目录 1.概述 2.书写规则 3.应用案例 4.用于信息查找 5.用于搜索替换&#xff0c;分割内容 1.概述 由一些特定的字符组成&#xff0c;代表一个规则 作用&#xff1a; 1.校验数据…

深度学习 —— 个人学习笔记17(锚框、多尺度锚框)

声明 本文章为个人学习使用&#xff0c;版面观感若有不适请谅解&#xff0c;文中知识仅代表个人观点&#xff0c;若出现错误&#xff0c;欢迎各位批评指正。 三十四、锚框 import torch import matplotlib.pyplot as plt from matplotlib_inline import backend_inlinetorch.…

RuoYi-Vue新建模块

一、环境准备 附:RuoYi-Vue下载与运行 二、新建模块 在RuoYi-Vue下新建模块ruoyi-test。 三、父pom文件添加子模块 在RuoYi-Vue的pom.xml中,引入子模块。 <dependency><groupId>com.ruoyi</groupId><artifactId>ruoyi-test</artifactId>&…

小程序背景图片无法通过 WXSS 获取

问题&#xff1a;pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取 可以使用网络图片&#xff0c;或者 base64&#xff0c;或者使用标签。 将图片转换为base64&#xff0c;地址 base64图片在线转换工具 - 站长工具 在这里把要使用的图片转换一把&#xff0c;然后将得…

JDBC连接Mysql数据库超详细讲解

JDBC连接Mysql数据库 如何导入驱动jar包 进入mysql官网 – https://www.mysql.com/ 点击下载找到方框内选项 点击 在项目文件夹创建lib文件 , 将下载好的驱动器导入 , 再添加到项目即可 步骤一&#xff1a;注册JDBC驱动 在Java中&#xff0c;要与数据库进行交互&…

HarmonyOS应用一之登录页面案例

目录&#xff1a; 1、代码示例2、代码分析3、注解分析 1、代码示例 实现效果&#xff1a; /** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance w…

openssl 制作 信用库与服务证书

文章目录 前言openssl 制作 信用库与服务证书1. CA 证书2. 服务器证书/秘钥库3. 创建信用库4. 注意事项 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会…

如何恢复误删视频?找回误删视频文件的办法分享

在数字化时代&#xff0c;视频已成为我们生活中不可或缺的一部分&#xff0c;记录着珍贵的回忆、工作资料或是学习素材。然而&#xff0c;在电脑上一不小心误删视频文件&#xff0c;该怎么办&#xff1f;视频误删怎么恢复&#xff1f;有什么小技巧可以找回删除的视频&#xff1…

QTableView使用示例-Qt模型视图委托(MVD)(Model-View-Delegate)

模型视图委托&#xff08;MVD&#xff09;是Qt中特有的设计模式&#xff0c;类似MVC设计模式&#xff0c;将MVC设计模式中的Controller当做MVD中的Delegate&#xff0c;两者的概念基本相同。不同的是委托不是独立存在&#xff0c;而是包含在视图里面。 模型视图委托设计模式中&…

West-Wild-v1.1靶机

信息收集&#xff1a; 靶机地址&#xff1a;https://www.vulnhub.com/entry/westwild-11,338/ &#xff08;1&#xff09;主页给出靶机ip&#xff0c;kali跟靶机仅主机网卡就可以 &#xff08;2&#xff09;端口扫描 nmap 192.168.8.129 -p- -A -sV -Pn &#xff08;3&#…

iOS ------ UIKit相关

UIView和CALayer UIView UIView表示屏幕上的一块矩形区域&#xff0c;它是基本上iOS中所有可视化控件的父类。UIView可以管理矩形区域里的内容&#xff0c;处理矩形区域的事件&#xff0c;包括子视图的管理以及动画的实现。 UIKit相关类的继承关系 UIView继承自UIResponde…

云原生-利用容器和编排器

容器和编排器旨在解决单片部署方法中常见的问题。 1. 整体部署的挑战 传统上&#xff0c;大多数应用程序都是作为单个单元部署的。这样的应用程序被称为单体。这种将应用程序作为单个单元部署的一般方法&#xff08;即使它们由多个模块或程序集组成&#xff09;称为单体架构&…

OrangePi AIpro学习4 —— 昇腾AI模型应用

目录 一、ATC模型转换 1.1 模型 1.2 ATC工具 1.3 实操模型转换 1.4 使用ATC工具时的一些关键注意事项 1.5 ATC模型转换命令举例 二、运行昇腾AI模型应用样仓程序 2.1 程序目录 2.2 下载模型和模型转换 2.3 下载图片和编译程序 2.4 解决报错 2.5 运行程序 三、运行…

《决胜B端 产品经理升级之路》 知识点总结

什么是b端产品&#xff1f; b端产品是指面向企业或组织的经营管理问题&#xff0c;旨在解决企业规模、成本、效率、品质和风控等方面的产品。这些产品主要帮助企业提高运营效率、降低成本、改善品质和控制风险等。b端产品适用于各种行业和企业类型&#xff0c;可以为企业带来深…

Parallels Desktop 可以做什么?

现在 Mac 电脑在全球越来越火&#xff0c;但是很多时候我们还是需要用win上的老物件&#xff0c;也就导致越来越多的用户都想在 Mac 上跑 Windows 软件和游戏。虽说 MacOS 本身有不少厉害的应用程序&#xff0c;可有些 Windows 专用的软件和游戏在 MacOS 里还是没法直接跑。 黑…

视觉SLAM ch3—三维空间的刚体运动

如果对于某些线性代数的知识不太牢固&#xff0c;可以看一下我的另一篇博客&#xff0c;写了一些基础知识并推荐了一些视频。 旋转矩阵 单元所需的线代基础知识https://blog.csdn.net/Johaden/article/details/141023668 一、旋转矩阵 1.点、向量、坐标系 在数学中&…

线程池总结

一.线程池的概念 线程池是一种管理和复用线程的设计模式&#xff0c;主要用于提高多线程编程中的效率。它通过维护一组线程来执行多个任务&#xff0c;从而避免频繁地创建和销毁线程所带来的性能开销。 线程池里取线程比从系统中申请线程更高效的原因&#xff0c;也是因为线程池…

基于深度学习的太阳暗条检测(2020年以来)

A universal method for solar filament detection from Hα observations using semi-supervised deep learning A&A, 686, A213 (2024) A universal method for solar filament detection from Hα observations using semi-supervised deep learning (aanda.org) ABS…

七夕特辑:用Ta的照片定制专属二维码,传递独一无二的爱

七夕火热进行中&#xff0c;有人还在纠结送啥礼物合适么&#xff1f; 围观可能是“全网第一人”的技术助力七夕之特别礼物 &#xff01;&#xff01;&#xff01; 欢迎扫码关注围观。 七夕特辑&#xff1a;扫码解锁爱情故事&#xff0c;让爱穿越时空 七夕特辑&#xff1a;用…