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

elementUI的table使用展开功能( type=“expand“ ),展开时合起上一次展开的内容,始终保持展开内容为一个,并且再次点击合起自身

直接上代码了没什么可讲的,主要是用到

row-key="id"

:expand-row-keys="expands

@row-click="handleRowClick"

<template><div class="ele-body"><el-card shadow="never"><!-- 数据表格 --><ele-pro-tableref="table":columns="columns":datasource="datasource"height="calc(100vh - 266px)"tool-class="ele-toolbar-form":toolkit="[]"cache-key="recordTable"row-key="id":expand-row-keys="expands"@row-click="handleRowClick"highlight-current-row@current-change="handleCurrentChange"><template v-slot:toolbar><!-- 搜索表单 --><rectify-search @search="reload"> </rectify-search></template><!-- 展开内容 --><template v-slot:expand="{ row }"><el-table :data="row.riskList" :show-header="true"><el-table-column label="序号" type="index" width="50"></el-table-column><el-table-column label="不符合项描述" show-overflow-tooltip><template v-slot="{ row }"><span>{{ row.problemDescription }}</span></template></el-table-column><el-table-column label="整改截止日期" width="130"><template v-slot="{ row }"><div>{{ $util.toDateString(row.endDate, 'yyyy-MM-dd') }}</div></template></el-table-column><el-table-column label="不符合项" show-overflow-tooltip><template v-slot="{ row }"><span>{{'【' +row.checkMasterName +'】' +row.checkItemCode +' ' +row.checkItemName}}</span></template></el-table-column><el-table-column label="整改状态" width="110" show-overflow-tooltip><template v-slot="{ row }"><el-tag size="small" type="primary" :disable-transitions="true">{{ getDictName('rectify_status', row.rectifyStatus) }}</el-tag></template></el-table-column><el-table-column label="回执内容" width="230"><template v-slot="{ row }"><span>{{ row.receiptDescription }}</span></template></el-table-column><el-table-column label="操作" width="240" align="center"><template v-slot="{ row }"><el-linktype="primary":underline="false"icon="el-icon-search"@click="openEdit(row)">查看</el-link><el-linkv-if="row.rectifyStatus < 1"type="primary":underline="false"icon="el-icon-_retrieve"@click="toCorrect(row)">纠正回执</el-link><!-- <el-linkv-if="row.rectifyStatus != 0"type="primary":underline="false"icon="el-icon-_retrieve">已回执</el-link> --></template></el-table-column></el-table></template><template v-slot:superviseType="{ row }">{{ getDictName('supervise_type', row.superviseType) }}</template><!-- 操作列 --><template v-slot:action="{ row }"><el-linktype="primary":underline="false"icon="el-icon-search"@click="openSheetAll(row)">查看</el-link></template></ele-pro-table></el-card><rectify-edit :visible.sync="showEdit" :data="current"></rectify-edit><rectify-correct-edit:visible.sync="showCorrectEdit":data="currentCorrect"@done="reload"></rectify-correct-edit></div>
</template><script>import rectifyEdit from './components/rectify-edit.vue';import rectifyCorrectEdit from './components/rectify-correct-edit.vue';import rectifySearch from './components/rectify-search.vue';import { pageDisposalOrders } from '@/api/disposal/disposal-order';export default {name: 'rectify',components: {rectifySearch,rectifyCorrectEdit,rectifyEdit},data() {return {showEdit: false,showCorrectEdit: false,columns: [{width: 45,type: 'expand',columnKey: 'expand',align: 'center',slot: 'expand'},{prop: 'code',label: '处置单编号',sortable: 'custom',showOverflowTooltip: true,width: 220},{prop: 'orderType',label: '任务类型',showOverflowTooltip: true,minWidth: 110,slot: 'orderType',formatter: (_row, _column, cellValue) => {return this.$globalDictName('order_type', cellValue);}},{prop: 'superviseType',label: '监督方式',sortable: 'custom',slot: 'superviseType',minWidth: 140},{prop: 'orgName',label: '监督站',sortable: 'custom',showOverflowTooltip: true,minWidth: 140},{prop: 'unitCode',label: '生产单位',sortable: 'custom',showOverflowTooltip: true,width: 180,formatter: (_row, _column, cellValue) => {return this.$globalOrgName(cellValue);}},{prop: 'description',label: '任务描述',sortable: 'custom',showOverflowTooltip: true,minWidth: 140},{prop: 'findDate',label: '监督日期',sortable: 'custom',showOverflowTooltip: true,width: 180,formatter: (_row, _column, cellValue) => {return this.$util.toDateString(cellValue, 'yyyy-MM-dd');}}],current: {},currentCorrect: {},expands: [],currentRow: null};},created() {},methods: {handleRowClick(row) {if (this.expands.includes(row.id)) {this.expands = this.expands.filter((val) => val !== row.id);} else {this.expands = [];this.expands.push(row.id);}},handleCurrentChange(val) {this.currentRow = val;},/* 表格数据源 */datasource({ page, limit, where, order }) {let statusList = null; //'(0,-1,-2)';return pageDisposalOrders({...where,...order,page,limit,auditStatus: 0,rectifyStatus: 0,statusIds: statusList});// return data;},getDictName(type, code) {return this.$globalDictName(type, code);},/* 刷新表格 */reload(where) {this.$refs.table.reload({ where: where });},/* 打开所有记录 */openEdit(row) {this.current = row;this.showEdit = true;},toCorrect(row) {this.currentCorrect = row;this.showCorrectEdit = true;}}};
</script>

相关文章:

elementUI的table使用展开功能( type=“expand“ ),展开时合起上一次展开的内容,始终保持展开内容为一个,并且再次点击合起自身

直接上代码了没什么可讲的,主要是用到 row-key"id" :expand-row-keys"expands row-click"handleRowClick" <template><div class"ele-body"><el-card shadow"never"><!-- 数据表格 --><ele-pro-t…...

【金】?Y? python网页前端streamlit

1、如何从 Google Colab Notebook 启动 streamit参考-How to Launch Streamlit App from Google Colab Notebook !streamlit run web.py & npx localtunnel --port 8501 & curl ipv4.icanhazip.com...

数据仓库之Lambda架构

Lambda架构是一种设计大规模数据处理系统的架构模式&#xff0c;它结合了批处理和实时处理的优点&#xff0c;以应对大数据的多样性、速度和规模问题。该架构主要由三个层次组成&#xff1a;批处理层&#xff08;Batch Layer&#xff09;、速度层&#xff08;Speed Layer&#…...

Apriori 处理ALLElectronics事务数据

通过Apriori算法挖掘以下事务集合的频繁项集&#xff1a; 流程图 代码 # 导入必要的库 from itertools import combinations# 定义Apriori算法函数 def apriori(transactions, min_support, min_confidence):# 遍历数据&#xff0c;统计每个项的支持度 item_support {}for tr…...

Content Provider:深入解析Android数据共享的核心组件

在Android开发中&#xff0c;Content Provider是一个重要的组件&#xff0c;它允许应用程序之间共享数据。它扮演着“数据访问中间层”的角色&#xff0c;为不同应用程序提供了一个统一的数据访问接口。以下将从技术难点、面试官关注点、回答吸引力以及代码举例四个方面&#x…...

069、Python 函数的递归调用

函数可以自己调用自己吗&#xff1f;&#xff1f;&#xff1f; 这就涉及函数的递归的用法了。 递归的概念&#xff1a; 函数递归是指函数在其定义中直接或间接调用自身的过程。 递归是一种强有力的编程技术&#xff0c;通常用于解决可以被分解为相同问题的子问题的情况&…...

数仓开发那些事_番外

一位神州的正式员工&#xff08;没错&#xff0c;就是之前文章中出现的实习生&#xff09;&#xff1a;一闪&#xff0c;你今年涨工资了吗&#xff1f; 一闪&#xff1a;mad&#xff0c;一年辛苦到头只涨了500米 神州员工&#xff1a;你去年绩效不是优秀吗&#xff0c;怎么就涨…...

Vue3+TypeScript项目实战——打造雨雪交加的智慧城市

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…...

经典游戏案例:植物大战僵尸

学习目标&#xff1a;植物大战僵尸核心玩法实现 游戏画面 项目结构目录 部分核心代码 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.SceneManagement; using Random UnityEngine.Random;public enum Z…...

Go 与 Java 字符编码选择:UTF-8 与 UTF-16 的较量

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...

vscode+picgo+gitee实现Markdown图床

vscode中编辑Markdown文件&#xff0c;复制的图片默认是保存在本地的。当文档上传csdn时&#xff0c;会提示图片无法识别 可以在gitee上创建图床仓库&#xff0c;使用picgo工具上传图片&#xff0c;在Markdown中插入gitee链接的方式来解决该问题。 一、 安装picgo工具 1.1 v…...

【thinkphp问题栏】tp5.0分页技巧

一、调用内置方法paginate thinkphp内置了一个paginate方法支持分页功能 该方法位于library\think\db\Query.php内 /*** 分页查询* param int|array $listRows 每页数量 数组表示配置参数* param int|bool $simple 是否简洁模式或者总记录数* param array $config 配…...

获取时间戳是使用System.currentTimeMillis()还是使用new Date().getTime()(阿里开发规范)?

1.阿里规范 在阿里的Java开发手册中强制要求使用System.currentTimeMillis() 2.为什么(源码详解) new Date().getTime()它实际上也是调用的System.currentTimeMillis()&#xff0c;源码分析。 这个fastTime是它的成员变量&#xff0c;在new Date()的时候就被赋值了。 扩展一…...

仿饿了么加入购物车旋转控件 - 自带闪转腾挪动画 的按钮

, mWidth - mCircleWidth, mHeight - mCircleWidth); canvas.drawRoundRect(rectF, mHintBgRoundValue, mHintBgRoundValue, mHintPaint); //前景文字 mHintPaint.setColor(mHintFgColor); // 计算Baseline绘制的起点X轴坐标 int baseX (int) (mWidth / 2 - mHintPaint.m…...

Docker部署nacos集群

docker拉取nacos镜像&#xff0c;本文使用nacos2.0.3 三台服务器都要执行以下命令 docker pull nacos/nacos-server:v2.2.0准备挂载的日志目录和配置文件目录 日志&#xff1a;mkdir /usr/local/software/nacos/logs 配置文件&#xff1a;/usr/local/software/nacos/conf在配…...

centos查找文件 及 操作写入的进程

du -sh * 查看目录空间占用、发现大文件&#xff0c;确定进程&#xff0c;结束 yum install lsof 安装lsof 查看文件写入的 进程 2. lsof /root/.influxdbv2/engine/data/bab49411e5f7cbce/autogen/1/000000036-000000002.tsm COMMAND PID USER FD TYPE …...

构建高可用Java微服务架构的秘籍

构建高可用Java微服务架构的秘籍 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 随着云计算和分布式系统的快速发展&#xff0c;微服务架构已成为构建大型应用…...

VBA学习(18):VBA制作任意工作表均可使用的聚光灯

在需要制作聚光的工作簿&#xff0c;按<ALTF11>组合键&#xff0c;打开VBE编辑器。在右侧[工程资源管理器窗格]选中ThisWorkbook模块&#xff0c;将以下代码复制粘贴到该模块的代码窗口。 Private Sub Workbook_SheetSelectionChange(ByVal Sh As Object, ByVal Target …...

【STM32-启动文件 startup_stm32f103xe.s】

STM32-启动文件 startup_stm32f103xe.s ■ STM32-启动文件■ STM32-启动文件主要做了以下工作&#xff1a;■ STM32-启动文件指令■ STM32-启动文件代码详解■ 栈空间的开辟■ 栈空间大小 Stack_Size■ .map 文件的详细介绍■ 打开map文件 ■ 堆空间■ PRESERVE8 和 THUMB 指令…...

51学习记录(一)——51介绍及震动感应灯

文章目录 前言一、STC89C522.内部结构及引脚 二、继电器原理及震动传感器原理三、项目搭建及实现 前言 一个学习嵌入式的小白~ 有问题评论区或私信指出 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、STC89C52 1.简介 所属系列&#xff1a;51单…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...