el-table表格嵌套子表格:展开所有内容;对当前展开行内容修改,当前行默认展开;

原文1
原文2
原文3

一、如果全部展开

default-expand-all="true"

二、设置有数据的行打开下拉

1、父table需要绑定两个属性expand-row-key和row-key

 <el-table:data="tableData":expand-row-keys="expends"  //expends是数组,设置你要展开行的id:row-key="getRowKeys" //通过getRowKeys方法获取到row的行id值>

2、data中设置

 data() {return {expends:[],}}

3、methods中设置

 methods: {//设置table中的扩展项,展开的id,此处需要全部展开getExpends(){var Id = this.tableData.map(item => item.id)this.expends = Id},getRowKeys(row){return row.id},}

如果是有数据的展开:
在这里插入图片描述

4、created()中调用 getExpends(),使一打开网页就全部展开(注意你的父tableData数据得先拿到才调用getExpends方法)

created() {this.getExpends();},

三、对当前展开行内容修改,当前行默认展开

:row-key="getRowKeys"
<!--添加父表默认展开的数组以ID -->
:expand-row-keys="expandednewarr"
@expand-change="expandChange"
<el-table-column align="center" type="expand"><template slot-scope="props"><el-table:data="props.row.list"row-key="id"
	expandChange(row, expandedRows) {this.expandednewarr = expandedRows.map(item => item.id.toString());},

全部代码:

<template><div class="mod-config"><el-form:inline="true":model="dataForm"@keyup.enter.native="getDataList()"><el-form-item><el-button type="primary" @click="drawanjuan()">领取案卷</el-button></el-form-item></el-form><el-table:data="dataList"v-loading="dataListLoading"style="width: 100%;"stripe:row-key="getRowKeys":expand-row-keys="expandednewarr"@expand-change="expandChange"max-height="680"><el-table-column align="center" type="expand"><template slot-scope="props"><el-table:data="props.row.list"style="width: 100%"class="child-table"row-key="id"stripe><el-table-column width="60" align="center"></el-table-column><el-table-column prop="id" label="ID" /><el-table-column prop="anjuanName" label="案卷名称" /><el-table-column prop="chaijuanStartTime" label="拆卷开始时间"><template slot-scope="{ row }">{{ row.chaijuanStartTime || "null" }}</template></el-table-column><el-table-column prop="chaijuanEndTime" label="拆卷结束时间"><template slot-scope="{ row }">{{ row.chaijuanEndTime || "null" }}</template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonv-if="isAuth('ycl:chaijuanrecord:update')"type="text"size="small"@click="chaijuanstatusbtn(scope.row)">{{ getButtonLabel(scope.row) }}</el-button></template></el-table-column></el-table></template></el-table-column><el-table-column label="ID" prop="id"></el-table-column><el-table-column label="调卷姓名" prop="createName"></el-table-column><el-table-column label="调卷数量" prop="numsection"></el-table-column><el-table-column label="调卷前缀" prop="diaojuanPrefix"></el-table-column><el-table-column label="调卷位置" prop="diaojuanPath"></el-table-column><el-table-column label="调卷时间" prop="createTime"></el-table-column></el-table><el-pagination@size-change="sizeChangeHandle"@current-change="currentChangeHandle":current-page="pageIndex":page-sizes="[10, 20, 50, 100]":page-size="pageSize":total="totalPage"layout="total, sizes, prev, pager, next, jumper"></el-pagination><add-or-updatev-if="addOrUpdateVisible"ref="addOrUpdate"@refreshDataList="getDataList"></add-or-update></div>
</template><script>
import AddOrUpdate from "./chaijuanrecord-add-or-update";
export default {data() {return {dataForm: {archivesCode: "",archivesName: "",username: ""},dataList: [],pageIndex: 1,pageSize: 10,totalPage: 0,dataListLoading: false,dataListSelections: [],addOrUpdateVisible: false,expandednewarr: [],getRowKeys(row) {return row.id;}};},components: {AddOrUpdate},activated() {this.getDataList();},methods: {// 获取数据列表getDataList() {this.dataListLoading = true;this.$http({url: this.$http.adornUrl("/chai-juan-record/pageList"),method: "get",params: this.$http.adornParams({page: this.pageIndex,limit: this.pageSize})}).then(({ data }) => {if (data && data.code === 0) {this.dataList = data.page.list;this.dataList.forEach(item => {item.numsection = item.startNumber + "-" + item.endNumber;});this.totalPage = data.page.totalCount;} else {this.dataList = [];this.totalPage = 0;}this.dataListLoading = false;});},// 每页数sizeChangeHandle(val) {this.pageSize = val;this.pageIndex = 1;this.getDataList();},// 当前页currentChangeHandle(val) {this.pageIndex = val;this.getDataList();},drawanjuan() {this.addOrUpdateVisible = true;this.$nextTick(() => {this.$refs.addOrUpdate.init();});},expandChange(row, expandedRows) {this.expandednewarr = expandedRows.map(item => item.id.toString());},chaijuanstatusbtn(row) {const data = {id: row.id};this.$http({url: this.$http.adornUrl("/chai-juan-record/startAnEndChaiJuan"),method: "post",data: data}).then(({ data }) => {if (data && data.code === 0) {this.getDataList();}});},getButtonLabel(row) {if (row.chaijuanStartTime === null) {return "开始拆卷";} else if (row.chaijuanStartTime !== null &&row.chaijuanEndTime === null) {return "结束拆卷";} else {return "已完成拆卷";}}}
};
</script>
<style scoped lang="scss">
.mod-config {padding: 20px;
}
/deep/.el-table tbody tr:hover > td {background-color: transparent !important;
}
</style>

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

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

相关文章

区间预测 | MATLAB实现QRDNN深度神经网络分位数回归时间序列区间预测

区间预测 | MATLAB实现QRDNN深度神经网络分位数回归时间序列区间预测 目录 区间预测 | MATLAB实现QRDNN深度神经网络分位数回归时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 MATLAB实现QRDNN深度神经网络分位数回归时间序列区间预测。QRDNN模型…

用.Net Core框架创建一个Web API接口服务器

我们选择一个Web Api类型的项目创建一个解决方案为解决方案取一个名称我们这里选择的是。Net 8.0框架 注意&#xff0c;需要勾选的项。 我们找到appsetting.json配置文件 appsettings.json配置文件内容如下 {"Logging": {"LogLevel": {"Default&quo…

扩展SpringBoot中的SpringMVC的默认配置

SpringBoot默认已经给我们做了很多SpringMVC的配置&#xff0c;哪些配置&#xff1f; 视图解析器ViewResolver静态资料的目录默认首页index.html图标名字和图标所在目录&#xff0c;favicon.ico类型转换器Converter&#xff0c;格式转换器的Formatter消息转换器HttpMessageCon…

练习题:一维数组

练习题 第一题 键盘录入一组数列&#xff0c;利用冒泡排序将数据由大到小排序 代码 #include <stdio.h>int arr_home01() {int arr[10];int i,j,temp;printf("请输入10个测试整数&#xff1a;\n");int len sizeof(arr) / sizeof(arr[0]);for(i 0;i < …

2024安装hexo和next并部署到github和服务器最新教程

碎碎念 本来打算写点算法题上文所说的题目&#xff0c;结果被其他事情吸引了注意力。其实我之前也有过其他博客网站&#xff0c;但因为长期不维护&#xff0c;导致数据丢失其实是我懒得备份。这个博客现在部署在GitHub Pages上&#xff0c;github不倒&#xff0c;网站不灭&…

【鸿睿创智开发板试用】RK3568 NPU的人工智能推理测试

目录 引言 驱动移植 例程编译 修改build.sh 执行编译 运行测试 部署libc的库文件 执行测试程序 结语 引言 鸿睿创智的H01开发板是基于RK3568芯片的&#xff0c;瑞芯微芯片的一大特色就是提供了NPU推理的支持。本文将对其NPU推理进行测试。 驱动移植 H01的开发板已经…

概率论得学习和整理29: 用EXCEL 描述二项分布

目录 1 关于二项分布的基本内容 2 二项分布的概率 2.1 核心要素 2.2 成功K次的概率&#xff0c;二项分布公式 2.3 期望和方差 2.4 具体试验 2.5 概率质量函数pmf 和cdf 3 二项分布的pmf图的改进 3.1 改进折线图 3.2 如何生成这种竖线图呢 4 不同的二项分布 4.1 p0.…

数据结构(二叉树)

前言&#xff1a; 在数据结构那片浩瀚无垠、仿若神秘宇宙的天地里&#xff0c;二叉树宛如一颗散发着独特光辉、极为耀眼的星辰。它就像一位技艺精湛的建筑师&#xff0c;运用独特的二叉分支结构&#xff0c;精心构建起层次分明、秩序井然的数据组织 “大厦”。根节点仿若大厦的…

docker仓库数据传输加密

1.进行加密数据运算对配置文件底下的内容进行删除 [rootlocalhost ~]# vim /etc/docker/daemon.json 重新启动docker程序 [rootlocalhost ~]# systemctl restart docker 2.建立加密目录&#xff0c;生成认证key和证书 [rootlocalhost ~]# mkdir certs [rootlocalhost ~]# open…

大数据技术与应用——数据可视化(山东省大数据职称考试)

大数据分析应用-初级 第一部分 基础知识 一、大数据法律法规、政策文件、相关标准 二、计算机基础知识 三、信息化基础知识 四、密码学 五、大数据安全 六、数据库系统 七、数据仓库. 第二部分 专业知识 一、大数据技术与应用 二、大数据分析模型 三、数据科学 数据可视化 大…

【指南】03 CSC联系外导

确定外导 课题组有合作关系的国外导师与自己研究方向密切相关的国外导师国外高校官网、谷歌学术、Research Gate等平台检索不可以是中国港澳台的高校科研院所或机构注意外导所在高校排名和科研水平可列表记录注意外国签证政策 发送邮件 自我介绍简要介绍CSC介绍自己的研究对…

0基础学前端-----CSS DAY6

0基础学前端-----CSS DAY6 视频参考&#xff1a;B站Pink老师 今天是CSS学习的第六天&#xff0c;今天开始的笔记对应Pink老师课程中的CSS第三天的内容。 本节重点&#xff1a;CSS的三大特性以及CSS的盒子模型。 1.CSS的三大特性 CSS有三个重要特性&#xff1a;层叠性、继承性…

本地部署大模型QPS推理测试

目录 1、测试环境1.1、显卡1.2、模型1.3、部署环境1.3.1、docker1.3.2、执行命令 2、测试问题2.1、20字左右问题2.2、50字左右问题2.3、100字左右问题 3、测试代码3.1、通用测试代码3.2、通用测试代码&#xff08;仅供参考&#xff09; 4、测试结果4.1、通用测试结果4.2、RAG测…

测试工程师八股文04|计算机网络 和 其他

一、计算机网络 1、http和https的区别 HTTP和HTTPS是用于在互联网上传输数据的协议。它们都是应用层协议&#xff0c;建立在TCP/IP协议栈之上&#xff0c;用于客户端&#xff08;如浏览器&#xff09;和服务器之间的通信。 ①http和https的主要区别在于安全性。http是一种明…

【Tomcat】第一站:理解tomcat与Socket

目录 1. Tomcat 1.1 Tomcat帮助启动http服务器。 1.2 tomcat理解&#xff1a; 2. 计算机网络最基本的流程 2.1 信息是怎么来的&#xff1f; 2.2 端口是干什么的&#xff1f; 3. 简单的Socket案例 服务端 客户端 启动&#xff1a; 3.2 在Tomcat发送信息&#xff0c;看…

抖音SEO短视频矩阵源码系统开发分享

在数字营销的前沿阵地&#xff0c;抖音短视频平台凭借其独特的魅力和庞大的用户基础&#xff0c;已成为社交媒体领域一股不可小觑的力量。随着平台影响力的持续扩大&#xff0c;如何有效提升视频内容的可见度与流量成为了内容创作者关注的焦点。在此背景下&#xff0c;一套专为…

使用 DeepSpeed 微调 OPT 基础语言模型

文章目录 OPT 基础语言模型Using OPT with DeepSpeedmain.py 解析1、导入库和模块2、解析命令行参数3、main 函数3.1 设备与分布式初始化3.2 模型与数据准备3.3 定义评估函数3.4 优化器与学习率调度器设置3.5 使用 deepspeed 进行模型等初始化3.6 训练循环3.7 模型保存 4、dsch…

window QT/C++ 与 lua交互(mingw + lua + LuaBridge + luasocket)

一、环境与准备工作 测试环境:win10 编译器:mingw QT版本:QT5.12.3 下载三种源码: LuaBridge源码:https://github.com/vinniefalco/LuaBridge LUA源码(本测试用的是5.3.5):https://www.lua.org/download.html luasocket源码:https://github.com/diegonehab/luasocket 目…

边缘智能创新应用大赛获奖作品系列三:边缘智能强力驱动,机器人天团花式整活赋能千行百业

边缘智能技术快速迭代&#xff0c;并与行业深度融合。它正重塑产业格局&#xff0c;催生新产品、新体验&#xff0c;带动终端需求增长。为促进边缘智能技术的进步与发展&#xff0c;拓展开发者的思路与能力&#xff0c;挖掘边缘智能应用的创新与潜能&#xff0c;高通技术公司联…

中后台管理信息系统:Axure12套高效原型设计框架模板全解析

中后台管理信息系统作为企业内部管理的核心支撑&#xff0c;其设计与实现对于提升企业的运营效率与决策能力具有至关重要的作用。为了满足多样化的中后台管理系统开发需求&#xff0c;一套全面、灵活的原型设计方案显得尤为重要。本文将深入探讨中后台管理信息系统通用原型方案…