当前位置: 首页 > news >正文

el-table 树形结构数据 设置某一层,新增按钮不展示

 

  <template><div><el-table:data="tableData":row-class-name="rowClassName":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><!-- 表格列定义 --><!-- ... --><el-table-column label="操作" width="100"><template slot-scope="scope"><el-buttonv-if="showAddButton(scope.row)"type="primary"size="small"@click="handleAdd(scope.row)">新增</el-button></template></el-table-column></el-table></div>
</template><script>
export default {data() {return {// 表格数据tableData: [],};},methods: {rowClassName({ row }) {// 自定义方法,根据行数据设置行的 CSS 类名if (this.getLevel(row) === 2) {// 判断行的层级是否为第三级(索引从 0 开始)return "disable-add-button-row"; // 返回自定义的 CSS 类名}return "";// 其他行不添加特定的 CSS 类名},getLevel(row) {// 获取行的层级let level = 0;let parent = this.tableData.find((item) => item.rowKey === row.parentKey);while (parent) {level++;parent = this.tableData.find((item) => item.rowKey === parent.parentKey);}return level;},showAddButton(row) {// 判断是否展示新增按钮return this.getLevel(row) !== 2;},handleAdd(row) {// 点击新增按钮的逻辑处理 // ...},},
};
</script><style scoped>
.disable-add-button-row .el-button {display: none; // 隐藏新增按钮
}
</style>

在修正后的代码中,我们添加了一个 getLevel 方法,通过递归查找当前行的父节点并计算层级。然后我们根据 getLevel(row) 的返回值来确定当前行的层级,并根据层级判断是否显示新增按钮。

请将示例代码中的 :data 属性以及其他相关部分根据您的实际需求进行调整,确保适配您的数据结构和表格列定义。同时,需要在样式部分的 <style> 标签中设置 .disable-add-button-row .el-button 类的样式,以隐藏新增按钮。

相关文章:

el-table 树形结构数据 设置某一层,新增按钮不展示

<template><div><el-table:data"tableData":row-class-name"rowClassName":tree-props"{ children: children, hasChildren: hasChildren }"><!-- 表格列定义 --><!-- ... --><el-table-column label"操作…...

【Unity2D】粒子特效

为什么要使用粒子特效 Unity 的粒子系统是一种非常强大的工具&#xff0c;可以用来创建各种各样的游戏特效&#xff0c;如火焰、烟雾、水流、爆炸等等。使用粒子特效可以使一些游戏动画更加真实或者使游戏效果更加丰富。 粒子特效的使用 在Hierarchy界面右键添加Effects->…...

第九十六回 网络综合示例:获取天气信息

文章目录 概念介绍使用方法示例代码 我们在上一章回中介绍了dio库中转换器相关的内容&#xff0c;本章回中将介绍网络综合示例&#xff1a;获取天气信息.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在前面章回中介绍了网络操作相关的内容&#xff0c;本章…...

Shell中获取昨天和多天前日期

1、获取今天日期 $ date -d now %Y-%m-%d 或者 $ date %F2、获取明天日期 $ date -d next-day %Y-%m-%d $ date -d tomorrow %Y-%m-%d3、获取昨天日期 $ date -d yesterday %Y-%m-%d 或者 $ date -d last-day %Y-%m-%d 或者 $ date -d "1 days ago" %Y-%m-%d …...

golang静态编译及编译失败排查步骤

文章目录 一、背景前提 二、静态编译概述1、执行静态编译设置CGO_ENABLED方式指定link方式 2、编译报错分析&#xff08;1&#xff09;确认系统上有没有安装libopus&#xff08;2&#xff09;设置LD_LIBRARY_PATH 三、详细排查过程1、下载bpf排查工具bcc, bcc-tools,python-bcc…...

2023年7月第4周大模型荟萃

2023年7月第4周大模型荟萃 2023.7.31版权声明&#xff1a;本文为博主chszs的原创文章&#xff0c;未经博主允许不得转载。 1、Cerebras推出全球最强AI超算 AI芯片初创公司Cerebras Systems和总部位于阿联酋的技术控股集团G42于7月20日宣布&#xff0c;携手打造一个由互联的超…...

Meta分析的选题与文献计量分析CiteSpace应用丨R语言Meta分析【数据清洗、精美作图、回归分析、诊断分析、不确定性及贝叶斯应用】

目录 ​专题一、Meta分析的选题与文献计量分析CiteSpace应用 专题二、Meta分析与R语言数据清洗及相关应用 专题三、R语言Meta分析与精美作图 专题四、R语言Meta回归分析 专题五、R语言Meta诊断分析与进阶 专题六、R语言Meta分析的不确定性及贝叶斯应用 专题七、深度拓展…...

vscode eslint配置

1. 全局安装 eslint npm install -g eslint 2. control shift p 输入 settings 打开设置进行配置 3. 添加配置 {"workbench.colorTheme": "One Dark Pro","eslint.debug": true,"eslint.execArgv": null,"eslint.alwaysShow…...

C++ 对象模型 C++ Object Model

C 对象模型 C Object Model 文章目录 C 对象模型 C Object ModelC语言的数据及函数C的类C对象模型 C语言的数据及函数 C语言中&#xff0c;数据和函数是分开声明的。 数据 typedef struct point2d {float x;float y; } Point2d;函数 打印Point2d的数值 void Point2d_print…...

leetcode做题笔记47

给定一个可包含重复数字的序列 nums &#xff0c;按任意顺序 返回所有不重复的全排列。 思路一&#xff1a;回溯 int* Source NULL; int Source_Size 0;int** Result NULL; int* Retcolsizes NULL; int Result_Index 0;int* Path NULL; int Path_Index 0;bool* Used …...

Linux Day04

目录 一、文件压缩与解压命令 1.1 tar cvf 文件名 ---打包命令生成.tar 1.2 tar xvf 文件名 ----解开包 生成文件 1.3 gzip .tar 压缩 生成.tar.gz压缩包 1.4 gzip -d .tar.gz 解压成包 1.5 直接把压缩包解压成文件 tar zxf .tar.gz 二、Linux 系统上 C 程序的…...

上海亚商投顾:沪指冲高回落 两市成交重回万亿

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 市场情绪 三大指数今日冲高回落&#xff0c;盘初一度集体涨超1%&#xff0c;随后涨幅明显回落&#xff0c;上证50午后一度翻…...

2023最新版本~十分钟零基础搭建EMQX服务器

购买服务器 已知服务器大厂商 1 阿里云 点击直接访问 2 华为云点击直接访问 3 腾讯云 点击直接访问 还是比较推荐大公司 不会跑路 这里我购买的是一年的华为云服务器(新用户 64一年) 镜像推荐乌班图18 登陆服务器&#xff08;需要重置密码&#xff01;&#xff01;&…...

SpringBoot2.5.6整合Elasticsearch7.12.1

SpringBoot2.5.6整合Elasticsearch7.12.1 下面将通过SpringBoot整合Elasticseach&#xff0c;SpringBoot的版本是2.5.6&#xff0c;Elasticsearch的版本是7.12.1。 SpringBoot整合Elasticsearch主要有三种方式&#xff0c;一种是通过elasticsearch-rest-high-level-client&am…...

准大一信息安全/网络空间安全专业学习规划

如何规划&#xff1f; 学习需要一个良好的学习习惯&#xff0c;建议刚开始一定要精通一项程序语言&#xff0c;学习其他的就会一通百通。过程中是按步骤学习&#xff0c;绝不半途看见苹果丢了梨&#xff0c;一定要强迫自己抵制新鲜技术的诱惑。 网络安全其实是个广而深的领域…...

WEB:php_rce

背景知识 Linux命令 thinkPHPv5漏洞 题目 打开页面&#xff0c;页面显示为thinkphp v5的界面&#xff0c;可以判断框架为thinkPHP&#xff0c;可以去网上查找相关的漏洞 由题目可知&#xff0c;php rec是一个通过远程代码执行漏洞来攻击php程序的一种方式 因为不知道是php版…...

问题:idea启动项目错误提示【command line is too long. shorten command line】

问题&#xff1a;idea启动项目错误提示【command line is too long. shorten command line】 参考博客 问题描述 启动参数过长&#xff0c;启动项目&#xff0c;错误提示 原因分析 出现此问题的直接原因是&#xff1a;IDEA集成开发环境运行你的“源码”的时候&#xff08…...

xshell连接Windows中通过wsl安装的linux子系统-Ubuntu 22.04

xshell连接Windows中通过wsl安装的linux子系统-Ubuntu 22.04 一、安装linux子系统 1.1、 启动或关闭Windows功能-适用于Linux的Windows子系统 1.2 WSL 官方文档 使用 WSL 在 Windows 上安装 Linux //1-安装 WSL 命令 wsl --install//2-检查正在运行的 WSL 版本&#xff1a;…...

子域名收集工具OneForAll的安装与使用-Win

子域名收集工具OneForAll的安装与使用-Win OneForAll是一款功能强大的子域名收集工具 GitHub地址&#xff1a;https://github.com/shmilylty/OneForAll Gitee地址&#xff1a;https://gitee.com/shmilylty/OneForAll 安装 1、python环境准备 OneForAll基于Python 3.6.0开发和…...

报数游戏、

描述 有n人围成一圈&#xff0c;顺序排号。从第1个人开始报数&#xff08;从1到3报数&#xff09;&#xff0c;凡报到3的人退出圈子&#xff0c;问最后留下的是原来的第几号的那位。。 输入 初始人数n 输出 最后一人的初始编号 输入样例 1 3 输出样例 1 2 输入样例 …...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...

node.js的初步学习

那什么是node.js呢&#xff1f; 和JavaScript又是什么关系呢&#xff1f; node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说&#xff0c; 需要在node.js的环境上进行当JavaScript作为前端开发语言来说&#xff0c;需要在浏览器的环境上进行 Node.js 可…...

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...