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架构是一种设计大规模数据处理系统的架构模式,它结合了批处理和实时处理的优点,以应对大数据的多样性、速度和规模问题。该架构主要由三个层次组成:批处理层(Batch Layer)、速度层(Speed Layer&#…...
Apriori 处理ALLElectronics事务数据
通过Apriori算法挖掘以下事务集合的频繁项集: 流程图 代码 # 导入必要的库 from itertools import combinations# 定义Apriori算法函数 def apriori(transactions, min_support, min_confidence):# 遍历数据,统计每个项的支持度 item_support {}for tr…...
Content Provider:深入解析Android数据共享的核心组件
在Android开发中,Content Provider是一个重要的组件,它允许应用程序之间共享数据。它扮演着“数据访问中间层”的角色,为不同应用程序提供了一个统一的数据访问接口。以下将从技术难点、面试官关注点、回答吸引力以及代码举例四个方面&#x…...
069、Python 函数的递归调用
函数可以自己调用自己吗??? 这就涉及函数的递归的用法了。 递归的概念: 函数递归是指函数在其定义中直接或间接调用自身的过程。 递归是一种强有力的编程技术,通常用于解决可以被分解为相同问题的子问题的情况&…...
数仓开发那些事_番外
一位神州的正式员工(没错,就是之前文章中出现的实习生):一闪,你今年涨工资了吗? 一闪:mad,一年辛苦到头只涨了500米 神州员工:你去年绩效不是优秀吗,怎么就涨…...
Vue3+TypeScript项目实战——打造雨雪交加的智慧城市
个人简介 👀个人主页: 前端杂货铺 ⚡开源项目: rich-vue3 (基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL) 🙋♂️学习方向: 主攻前端方向,正逐渐往全干发展 …...
经典游戏案例:植物大战僵尸
学习目标:植物大战僵尸核心玩法实现 游戏画面 项目结构目录 部分核心代码 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 的较量
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...
vscode+picgo+gitee实现Markdown图床
vscode中编辑Markdown文件,复制的图片默认是保存在本地的。当文档上传csdn时,会提示图片无法识别 可以在gitee上创建图床仓库,使用picgo工具上传图片,在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(),源码分析。 这个fastTime是它的成员变量,在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镜像,本文使用nacos2.0.3 三台服务器都要执行以下命令 docker pull nacos/nacos-server:v2.2.0准备挂载的日志目录和配置文件目录 日志:mkdir /usr/local/software/nacos/logs 配置文件:/usr/local/software/nacos/conf在配…...
centos查找文件 及 操作写入的进程
du -sh * 查看目录空间占用、发现大文件,确定进程,结束 yum install lsof 安装lsof 查看文件写入的 进程 2. lsof /root/.influxdbv2/engine/data/bab49411e5f7cbce/autogen/1/000000036-000000002.tsm COMMAND PID USER FD TYPE …...
构建高可用Java微服务架构的秘籍
构建高可用Java微服务架构的秘籍 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 随着云计算和分布式系统的快速发展,微服务架构已成为构建大型应用…...
VBA学习(18):VBA制作任意工作表均可使用的聚光灯
在需要制作聚光的工作簿,按<ALTF11>组合键,打开VBE编辑器。在右侧[工程资源管理器窗格]选中ThisWorkbook模块,将以下代码复制粘贴到该模块的代码窗口。 Private Sub Workbook_SheetSelectionChange(ByVal Sh As Object, ByVal Target …...
【STM32-启动文件 startup_stm32f103xe.s】
STM32-启动文件 startup_stm32f103xe.s ■ STM32-启动文件■ STM32-启动文件主要做了以下工作:■ STM32-启动文件指令■ STM32-启动文件代码详解■ 栈空间的开辟■ 栈空间大小 Stack_Size■ .map 文件的详细介绍■ 打开map文件 ■ 堆空间■ PRESERVE8 和 THUMB 指令…...
51学习记录(一)——51介绍及震动感应灯
文章目录 前言一、STC89C522.内部结构及引脚 二、继电器原理及震动传感器原理三、项目搭建及实现 前言 一个学习嵌入式的小白~ 有问题评论区或私信指出 提示:以下是本篇文章正文内容,下面案例可供参考 一、STC89C52 1.简介 所属系列:51单…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
