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.mzph.cn/pingmian/64610.shtml

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

相关文章

零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)

&#x1f3a5; 作者简介&#xff1a; CSDN\阿里云\腾讯云\华为云开发社区优质创作者&#xff0c;专注分享大数据、Python、数据库、人工智能等领域的优质内容 &#x1f338;个人主页&#xff1a; 长风清留杨的博客 &#x1f343;形式准则&#xff1a; 无论成就大小&#xff0c;…

NOTEBOOK_11 汽车电子设备分享(工作经验)

汽车电子设备分享 摘要 本文主要列出汽车电子应用的一些实验设备和生产设备&#xff0c;部分会给予一定推荐。目录 摘要一、通用工具&#xff1a;二、测量与测试仪器2.1测量仪器2.2无线通讯测量仪器2.3元器件测试仪2.4安规测试仪2.5电源供应器2.6电磁兼容测试设备2.7可靠性环境…

linux centos 7 安装 mongodb7

MongoDB 是一个基于文档的 NoSQL 数据库。 MongoDB 是一个文档型数据库&#xff0c;数据以类似 JSON 的文档形式存储。 MongoDB 的设计理念是为了应对大数据量、高性能和灵活性需求。 MongoDB使用集合&#xff08;Collections&#xff09;来组织文档&#xff08;Documents&a…

opengl 着色器 (四)最终章收尾

颜色属性 在前面的教程中&#xff0c;我们了解了如何填充VBO、配置顶点属性指针以及如何把它们都储存到一个VAO里。这次&#xff0c;我们同样打算把颜色数据加进顶点数据中。我们将把颜色数据添加3个float值到vertices数组。我们将把三角形的三个角分别指定为红色、绿色和蓝色…

矩阵在资产收益(Asset Returns)中的应用:以资产回报矩阵为例(中英双语)

本文中的例子来源于&#xff1a; 这本书&#xff0c;网址为&#xff1a;https://web.stanford.edu/~boyd/vmls/ 矩阵在资产收益(Asset Returns)中的应用&#xff1a;以资产回报矩阵为例 在量化金融中&#xff0c;矩阵作为一种重要的数学工具&#xff0c;被广泛用于描述和分析…

arXiv-2024 | NavAgent:基于多尺度城市街道视图融合的无人机视觉语言导航

作者&#xff1a;Youzhi Liu, Fanglong Yao*, Yuanchang Yue, Guangluan Xu, Xian Sun, Kun Fu 单位&#xff1a;中国科学院大学电子电气与通信工程学院&#xff0c;中国科学院空天信息创新研究院网络信息系统技术重点实验室 原文链接&#xff1a;NavAgent: Multi-scale Urba…

校园点餐订餐外卖跑腿Java源码

简介&#xff1a; 一个非常实用的校园外卖系统&#xff0c;基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化&#xff0c;提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合&am…

[计算机网络]ARP协议的故事:小明找小红的奇妙旅程

1.ARP小故事 在一个繁忙的网络世界中&#xff0c;每个设备都有自己的身份标识——MAC地址&#xff0c;就像每个人的身份证号码一样。在这个故事里&#xff0c;我们的主角小明&#xff08;主机&#xff09;需要找到小红&#xff08;目标主机&#xff09;的MAC地址&#xff0c;才…

arcgisPro将面要素转成CAD多段线

1、说明&#xff1a;正常使用【导出为CAD】工具&#xff0c;则导出的是CAD三维多线段&#xff0c;无法进行编辑操作、读取面积等。这是因为要素面中包含Z值&#xff0c;导出则为三维多线段数据。需要利用【复制要素】工具禁用M值和Z值&#xff0c;再导出为CAD&#xff0c;则得到…

vue+springboot+cas配置及cookie传递问题

cookie的注意事项 前边的文章已经介绍过cookie的基本信息&#xff0c;这里再次说明一点&#xff1a;cookie是无法进行跨域传递的&#xff0c;很多时候cookie无法设置和传递都是因为跨域问题&#xff0c;ip/端口不一致。 主要就是&#xff1a;被设置cookie和要传递cookie的地址…

simulink离散传递函数得到差分方程并用C语言实现

一. 创建连续时间的传递函数 G ( s ) s 2 217 s s 2 384 s 8989 G(s) \frac{s^2217s}{s^2384s8989} G(s)s2384s8989s2217s​ 二. 离散连续时间的传递函数G(s) 2.1 在matlab中用c2d函数双线性变换法离散G(s)&#xff0c; 下面是matlab脚本代码 % 创建连续时间传递函数 …

搭建私有链

文章目录 1. 准备工作2. 创建创世区块配置文件2.1 创建数据目录2.2 创建创世区块配置文件1. “config”部分2. “alloc”部分3. “coinbase”4. “difficulty”5. “extraData”6. “gasLimit”7. “nonce”8. “mixhash”9. “parentHash”10. “timestamp” 3. 初始化&#x…

AI Alignment: A Comprehensive Survey---治理

治理 除了技术解决方案之外&#xff0c;治理&#xff08;规则的制定和执行&#xff09;对于确保人工智能系统的安全开发和部署也是必不可少的。在本节中&#xff0c;我们将通过探索人工智能治理的作用、利益相关者在治理人工智能方面的功能和关系以及有效人工智能治理面临的若干…

CNN、RNN、LSTM和Transformer之间的区别和联系

文章目录 CNN、RNN、LSTM和Transformer之间的区别和联系前言CNN&#xff08;卷积神经网络&#xff09;RNN&#xff08;循环神经网络&#xff09;LSTM&#xff08;长短期记忆网络&#xff09;Transformer四者之间的联系与区别Yolo算法简介Yolo和CNN的关系YOLO各版本 CNN、RNN、L…

深度学习之超分辨率算法——FRCNN

– 对之前SRCNN算法的改进 输出层采用转置卷积层放大尺寸&#xff0c;这样可以直接将低分辨率图片输入模型中&#xff0c;解决了输入尺度问题。改变特征维数&#xff0c;使用更小的卷积核和使用更多的映射层。卷积核更小&#xff0c;加入了更多的激活层。共享其中的映射层&…

小程序UI自动化测试实践:Minium+PageObject !

小程序架构上分为渲染层和逻辑层&#xff0c;尽管各平台的运行环境十分相似&#xff0c;但是还是有些许的区别&#xff08;如下图&#xff09;&#xff0c;比如说JavaScript 语法和 API 支持不一致&#xff0c;WXSS 渲染表现也有不同&#xff0c;所以不论是手工测试&#xff0c…

堆的深度剖析及使用

目录 1.堆的创建1.1初始化1.2销毁 2.堆的使用2.1数据插入2.2堆顶元素2.3数据删除 3.堆的难点3.1向上调整3.1.1视频分析向上调整3.1.2 代码分析 3.2向下调整3.2.1视频分析向下调整3.2.2代码分析 1.堆的创建 堆的物理储存方式其实是一个数组&#xff0c;而逻辑储存方式其实是一个…

Hu矩原理 | cv2中基于Hu矩计算图像轮廓相似度差异的函数cv2.matchShapes【小白记笔记】

Hu 矩&#xff08;Hu Moments&#xff09; 是一种用于描述轮廓形状的 不变特征。它基于图像的矩提取&#xff0c;经过数学变换得到 7 个不变矩&#xff0c;这些不变矩在图像 平移、旋转和缩放等几何变换下保持不变&#xff0c;适合用来衡量轮廓或形状的相似度差异。 1、图像矩…

计算无人机俯拍图像的地面采样距离(GSD)矩阵

引言 在无人机遥感、测绘和精细农业等领域&#xff0c;地面采样距离&#xff08;Ground Sampling Distance&#xff0c;简称 GSD&#xff09;是一个非常重要的指标。GSD 是指图像中每个像素在地面上实际代表的物理距离&#xff0c;通常以米或厘米为单位。GSD 决定了图像的空间…

浅谈怎样系统的准备前端面试

前言 创业梦碎&#xff0c;回归现实&#xff0c;7 月底毅然裸辞&#xff0c;苦战两个月&#xff0c;拿到了美团和字节跳动的 offer&#xff0c;这算是从业以来第一次真正意义的面试&#xff0c;遇到蛮多问题&#xff0c;比如一开始具体的面试过程我都不懂&#xff0c;基本一直是…