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可靠性环境…

利用两种方式分别实现单例模式(懒汉式、饿汉式)

package testsingle;//实现单例的两种方式 public class TestMySingle {public static void main(String[] args) {ClassA ca1 ClassA.getClassA();ClassA ca2 ClassA.getClassA();System.out.println(ca1ca2);ClassB cb1 ClassB.getClassB();ClassB cb2 ClassB.getClassB(…

linux centos 7 安装 mongodb7

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

微服务设计原则——功能设计

文章目录 1.ID生成2.数值精度3.DB操作4.性能测试5.版本兼容5.1 向旧兼容5.2 向新兼容 6.异步时序问题7.并发问题7.1 并发时序7.2 并发数据竞争 参考文献 1.ID生成 在分布式系统中&#xff0c;生成全局唯一ID是非常重要的需求&#xff0c;因为需要确保不同节点、服务或实例在并…

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…

【Leetcode Top 100】199. 二叉树的右视图

问题背景 给定一个二叉树的 根节点 r o o t root root&#xff0c;想象自己站在它的右侧&#xff0c;按照从顶部到底部的顺序&#xff0c;返回从右侧所能看到的节点值。 数据约束 二叉树的节点个数的范围是 [ 0 , 100 ] [0,100] [0,100] − 100 ≤ N o d e . v a l ≤ 100…

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

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

Android AOSP 源码中批量替换“phone“为“tablet“的命令详解

我来帮你写一篇关于这条命令的分析博客。 Android 项目中批量替换"phone"为"tablet"的命令详解 前言 在 Android 开发中,有时我们需要批量修改资源文件中的某些文本内容。今天我们来分析一条结合了 grep 和 sed 的强大命令,该命令用于将项目中的 “ph…

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

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

YOLOv9-0.1部分代码阅读笔记-autoanchor.py

autoanchor.py utils\autoanchor.py 目录 autoanchor.py 1.所需的库和模块 2.def check_anchor_order(m): 3.def check_anchors(dataset, model, thr4.0, imgsz640): 4.def kmean_anchors(dataset./data/coco128.yaml, n9, img_size640, thr4.0, gen1000, verboseTrue…

arcgisPro将面要素转成CAD多段线

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

c# iis 解决跨域问题

该错误是一个典型的跨域问题&#xff0c;说明从 http://www.fuc.com 发起的请求被目标服务器&#xff08;https://aip.baidubce.com&#xff09;拒绝&#xff0c;原因是目标服务器未返回正确的 AccessControlAllowOrigin 响应头。 解决方法 1. 了解问题的本质 CORS&#xff08…

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

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

java数据类型(补充-引用类型)

Java还提供了引用数据类型&#xff08;Reference Types&#xff09;。这些类型的变量存储的是对象的引用&#xff0c;而不是直接存储值。引用数据类型主要包括以下几类&#xff1a; 类型描述类(Class)每个对象都有自己的状态&#xff08;属性或字段&#xff09;、行为&#xf…

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;我们将通过探索人工智能治理的作用、利益相关者在治理人工智能方面的功能和关系以及有效人工智能治理面临的若干…