el-table 指定层级展开

先来看看页面默认全部展开时页面的显示效果:所有节点被展开,一眼望去杂乱无章!

那么如何实现只展开指定的节点呢?最终效果如下:一眼看去很舒爽。 

干货上代码:

<el-table border v-if="refreshTable" v-loading="loading" :data="sourceList" row-key="id":default-expand-all="isExpandAll" :expand-row-keys="expandRowKeysList":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><!-- <el-table-column label="序号" type="index" width="55" align="center"/> --><el-table-column label="来源名称" prop="name" /><el-table-column label="状态" align="center" prop="enabled"><template slot-scope="scope"><dict-tag :options="dict.type.msg_status" :value="scope.row.enabled" /></template></el-table-column><el-table-column label="创建者" align="center" prop="createBy" /><el-table-column label="创建日期" align="center" prop="createTime" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"v-hasPermi="['system:source:edit']">修改</el-button><el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"v-hasPermi="['system:source:add']">新增</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"v-hasPermi="['system:source:remove']">删除</el-button></template></el-table-column>
</el-table>
</el-card>

 核心代码注意:这三个属性,一定要注意使用。id即接口给你返回的每个节点的id,具体看你后端接口返回的命名。

row-key="id" 
:default-expand-all="isExpandAll" 
:expand-row-keys="expandRowKeysList"

isExpandAll在data中默认为false意为不要全部默认展开,即全部自动收起。否则指定展开无效。

isExpandAll:false

再来看看被展开节点的设置:将要展开节点的id放入expandRowKeysList数组中。

:expand-row-keys="expandRowKeysList"
data(){return {isExpandAll:false
//table哪些行默认开展expandRowKeysList:[]}
}

 调用接口:

methods: {
/** 查询项目来源列表 */getList() {let self = thislistSource(this.queryParams).then(response => {this.sourceList = this.handleTree(response.data, "id", "pid");this.sourceList.forEach(element => {self.expandRowKeysList.push(element.id + '')});});},
}

默认展开一级。如果你默认展开第二级,则修改以上代码,将二级节点的id压入数组中即可。 

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

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

相关文章

ROS2 从头开始:第 5 部分 - 并发、执行器和回调组

一、说明 让我们回到基础。并发意味着系统或软件可以同时运行许多任务。例如,在单核 CPU 机器上,可以通过使用线程来实现并发。本文探讨了

基于边缘智能网关的储充一体电站管理方案

在“2030碳达峰&#xff0c;2060碳中和”的目标下&#xff0c;我国持续加快推进能源转型&#xff0c;扩大新能源占比&#xff0c;全国各地都在部署建设光伏、储能、新能源汽车充电等应用。随着新能源汽车的广泛普及&#xff0c;充电站、充电桩的需求快速增加&#xff0c;行业也…

分享从零开始学习网络设备配置--任务3.8 使用动态路由OSPF实现网络连通

任务描述 某公司随着规模的不断扩大&#xff0c;路由器的数量在原有的基础上有所增加。网络管理员发现原有的路由协议已经不适合现有的网络环境&#xff0c;可实施动态路由OSPF协议配置&#xff0c;实现网络中所有主机之间互相通信。因为动态路由OSPF协议可以实现快速收敛&…

zabbix实现钉钉报警

首先钉钉创建一个团队 自定义关键词 查看zabbix-server脚本存放的位置&#xff1a; [rootcontrolnode ~]# grep ^AlertScriptsPath /etc/zabbix/zabbix_server.conf AlertScriptsPath/usr/lib/zabbix/alertscripts zabbix server设置 在配置文件书写脚本目录vim /etc/za…

Redis的softMinEvictableIdleTimeMillis和minEvictableIdleTimeMillis参数

背景&#xff1a; Redis的softMinEvictableIdleTimeMillis&#xff0c;minEvictableIdleTimeMillis是一个令人疑惑两个参数&#xff0c;特别是当它和minIdle组合起来时就更难理解了&#xff0c;本文就来梳理下他们的之间的关系 softMinEvictableIdleTimeMillis&#xff0c;mi…

最新AI写作系统ChatGPT源码/支持GPT4.0+GPT联网提问/支持ai绘画Midjourney+Prompt+MJ以图生图+思维导图生成

一、AI创作系统 SparkAi系统是基于很火的GPT提问进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT系统&#xff1f;小编这里写一个详细图文教程吧&#x…

华为乾坤区县教育安全云服务解决方案(1)

华为乾坤区县教育安全云服务解决方案&#xff08;1&#xff09; 课程地址方案背景客户痛点分析区县教育网概述区县教育网业务概述区县教育网业务安全风险分析区县教育网安全运维现状分析区县教育网安全建设痛点分析 安全解决方案功能概述架构概述方案架构设备选型 课程地址 本…

系统架构设计师(第二版)学习笔记----软件工程

【原文链接】系统架构设计师&#xff08;第二版&#xff09;学习笔记----软件工程 文章目录 一、软件工程1.1 软件危机的表现1.2 软件工程的内容 二、软件过程模型2.1 软件的声明周期2.2 瀑布模型2.3 瀑布模型的缺点2.4 原型模型2.5 原型模型开发阶段2.6 开发原型的途径2.7 螺旋…

OpenCV实现FAST算法角点检测 、ORB算法特征点检测

目录 1 Fast算法 1.1 Fast算法原理 1.2 实现办法 1.2.1 机器学习的角点检测器 1.2.2 非极大值抑制 1.3 代码实现 1.4 结果展示 2 &#xff0c;ORB算法 2.1代码实现 2.2 结果展示 1 Fast算法 1.1 Fast算法原理 1.2 实现办法 1.2.1 机器学习的角点检测器 1.2.2 …

基于Android+OpenCV+CNN+Keras的智能手语数字实时翻译——深度学习算法应用(含Python、ipynb工程源码)+数据集(三)

目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据预处理2. 数据增强3. 模型构建4. 模型训练及保存1&#xff09;模型训练2&#xff09;模型保存 5. 模型评估 相关其它博客工程源代码下载其它资料下载 前言 本项目依赖于Keras深度学习模型&#xff0c;旨在对…

Mybatis-Flex框架初体验

本篇文章内容主要包括&#xff1a; MyBatis-Flex 介绍 MyBatis-Flex 是一个优雅的 MyBatis 增强框架&#xff0c;它非常轻量、同时拥有极高的性能与灵活性。我们可以轻松的使用Mybaits-Flex链接任何数据库&#xff0c;其内置的QueryWrapper亮点帮助我们极大的减少了SQL编写的工…

企业虚拟化KVM的三种安装方式(1、完全文本2、模板镜像+配置文件3、gustos图形方式部署安装虚拟机)

一、安装完虚拟机后的操作 第一步: 第二步&#xff1a;分配的内存大一下&#xff0c;处理器多些 第三步&#xff1a;打开虚拟化 打开虚拟机、安装KVM 一般企业如果使用kvm虚拟化平台&#xff0c;都会把物理服务器装成Centos的操作系统&#xff0c;然后装上kvm&#xff0c;创建…

crypto:摩丝

题目 根据题目所给的压缩包下载后解压&#xff0c;打开文本提示 摩斯密码&#xff0c;对照表可解码得到flag

时序预测 | MATLAB实现NGO-GRU北方苍鹰算法优化门控循环单元时间序列预测

时序预测 | MATLAB实现NGO-GRU北方苍鹰算法优化门控循环单元时间序列预测 目录 时序预测 | MATLAB实现NGO-GRU北方苍鹰算法优化门控循环单元时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现NGO-GRU北方苍鹰算法优化门控循环单元时间序列预测&#…

Cesium 问题:三维场景下添加的实体会被遮挡

文章目录 问题分析 问题 在三维场景下&#xff0c;我们添加的实体会被遮挡导致显示不够完整&#xff0c;例如 而应该的效果如下 分析 在三维场景中&#xff0c;实体可能会被以下几类物体或因素所遮挡&#xff1a; 地形&#xff1a;如果实体位于地球表面附近&#xff0c;地形…

GoLang 百行代码实现小项目《家庭收支软件》

界面显示 实现思路 GoLang 百行代码实现的小项目《家庭收支软件》是一个简单的家庭收支记账软件&#xff0c;可以通过命令行界面记录和显示收支明细。 在代码中&#xff0c;定义了两个结构体类型&#xff1a;record&#xff08;代表一条收支记录&#xff09;和software&#…

Tomcat部署、优化、以及操作练习

目录 一.Tomcat的基本介绍 1.1.Tomcat是什么&#xff1f; 1.2.Tomcat的组件构成 1.3.Tomcat功能组件结构的核心功能 1.4.Tomcat的顶层架构 1.5.Tomcat的请求过程 1.6.Tomcat的配置文件 二.Tomcat服务部署 2.1.搭建Tomcat运行环境 2.2.安装启动Tomcat 三.Tomcat服务优…

LLM(二)| LIMA:在1k高质量数据上微调LLaMA1-65B,性能超越ChatGPT

本文将介绍在Lit-GPT上使用LoRA微调LLaMA模型&#xff0c;并介绍如何自定义数据集进行微调其他开源LLM 监督指令微调&#xff08;Supervised Instruction Finetuning&#xff09; 什么是监督指令微调&#xff1f;为什么关注它&#xff1f; 目前大部分LLM都是decoder-only&…

一图读懂「五度易链」大数据智慧招商解决方案,一站式招商、选商!

“五度易链”以全体量产业大数据为依托&#xff0c;将为区域政府或产业园区构筑智慧招商解决方案&#xff0c;提供从“招商渠道”到“招商评估”再到“招商管理”一站式招商、选商服务。解决招商线索匮乏、招商管理碎片化等一系列问题&#xff0c;还将提供企业综合能力甄别及客…

一台电脑安装多个不同版本Python

1、前提 当前Windows电脑下已经安装了一个python3.11&#xff0c;现在需要安装一个python3.9。下载地址&#xff1a;Python Releases for Windows | Python.org 2、步骤 找到对应的版本&#xff0c;并下载安装包。下载后&#xff0c;打开安装包。按图片勾选&#xff0c;点击n…