vue2使用 element表格展开功能渲染子表格

 默认样式

修改后 

 样式2

<el-table :data="needDataFollow" border style="width: 100%"><el-table-column align="center" label="序号" type="index" width="80" /><el-table-column align="center" label="计算方向" prop="direction" /><el-table-column align="center" label="需求内容" prop="demand_content" /><el-table-column align="center" label="文档/附件"><template #default="scope"><div class="img"><a v-for="(item, index) in scope.row.report" :key="index" :href="item.url"target="_blank">{{ item.name }}</a></div></template></el-table-column><el-table-column align="center" label="创建时间" prop="createtime" /><el-table-column align="center" label="成交时间" prop="bargain_time" /><el-table-column align="center" label="成交状态"><template #default="scope">{{ scope.row.is_bargain === 1 ? '未成交' : '已成交' }}</template></el-table-column><el-table-column align="center" label="编辑需求"><template #default="scope"><img v-if="scope.row.is_bargain == 1" alt="编辑" src="../../assets/edit_icon.png"style="cursor: pointer" @click="getNeedEdit(scope.row.id)"><span v-else>需求已成交不可修改</span></template></el-table-column><el-table-column align="center" label="添加报价"><template #default="scope"><el-icon color="red" size="25px"@click="get_quotation(scope.row.id, 0, scope.row.direction)"><CirclePlusFilled /></el-icon></template></el-table-column><el-table-column type="expand" width="140" label="查看报价"><template #default="scopes"><el-form label-position="right" inline class="demo-table-expand"><el-table :data="scopes.row.tea" borderstyle="width:calc(100% - 80px);float:right" id="child_tab"><el-table-column align="center" label="报价编号" prop="number"width="180" /><el-table-column align="center" label="计算老师" prop="teacher_name" /><el-table-column align="center" label="报价" prop="tea_money" /><el-table-column align="center" label="周期" prop="cycle" /><el-table-column align="center" flex label="报价单" width="140"><template #default="scope"><el-button :disabled="scope.row.amount_price == '0.00'"type="success">生成报价单</el-button></template></el-table-column><el-table-column align="center" label="修改报价"><template #default="scope"><el-button type="success"@click="get_quotation(scope.row.id, 1)":disabled="scopes.row.is_bargain == 2">修改报价</el-button></template></el-table-column></el-table></el-form></template></el-table-column>
</el-table>

模拟数据

needDataFollow: [{"bargain_time": "","id": 7,"direction": "项目","demand_content": "777","report": [],"is_bargain": 1,"createtime": "2024-01-16","tea": [{"id": 6,"teacher_id": "555","teacher_name": "名字","cycle": "10","tea_money": "10.00","number": "PHAD-BJ-20240116-01"}]},
]

修改默认样式 

// 父表格颜色
/deep/.el-table th.el-table__cell {background: #596980 !important;font-size: 14px;font-weight: 400;color: #FFFFFF;
}
// 子表格颜色
#child_tab {/deep/ th {background-color: #f0f2fd !important;color: #000 !important;}
}// 展开向右边
/deep/ .el-table__expand-icon {color: #29b4ff;font-size: 15px;&::before {content: "展开";}.el-icon svg {transform: rotate(0deg);transition: 0.3s;}
}// 收起向下边
/deep/ .el-table__expand-icon--expanded {transform: rotate(0);&::before {content: "收起";}.el-icon svg {transform: rotate(90deg);transition: 0.3s;}
}

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

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

相关文章

【PHP】PHP利用ffmreg获取音频、视频的详细信息

目录 一、目的 二、下载并安装ffmreg 三、PHP代码 四、运行结果 一、目的 使用PHP利用ffmreg获取音频、视频的详细信息&#xff0c;音视频总时长、码率、视频分辨率、音频编码、音频采样频率、实际播放时间、文件大小。 二、下载并安装ffmreg 1、下载地址&#xff1a;htt…

Flink实战之运行架构

本文章&#xff1a;重点是分析清楚运行架构以及并行度与slot的分配 1、JobManager和TaskManager Flink中的节点可以分为JobManager和TaskManager。 JobManager处理器也称为Master&#xff0c;用于协调分布式任务执行。他们用来调度task进行具体的任务。TaskManager处理器也称…

漫潮星域2024最新项目,程序搭建开发。

漫潮星域APP2024年首发上线&#xff0c;打造元宇宙游戏的梦想家园。它是一款由生肖机甲与星际飞船为一体的元宇宙数字潮玩应用&#xff0c;在这片浩瀚的星域中&#xff0c;玩家通过自己的建设开启探索宇宙星球之旅 漫潮星域整体游戏业务将围绕生肖机甲为主题展开&#xff0c;结…

FPGA设计时序约束十六、虚拟时钟Virtual Clock

目录 一、序言 二、Virtual Clock 2.1 设置界面 三、工程示例 3.1 工程设计 3.2 工程代码 3.3 时序报告 3.4 答疑 四、参考资料 一、序言 在时序约束中&#xff0c;存在一个特殊的时序约束&#xff0c;虚拟时钟Virtual Clock约束&#xff0c;根据名称可看出时钟不是实…

如何安装“MySQL在虚拟机ubuntu”win10系统?

1、 更新列表 sudo apt-get update 2、 安装MySQL服务器 sudo apt-get install mysql-server 3、 安装MySQL客户端 sudo apt-get install mysql-client 4、 配置MySQL sudo mysql_secure_installation 5、 测试MySQL systemctl status mysql.service MySQL数据库基本…

IntelliJ IDEA使用学习

一、安装教程 网上自行下载&#xff0c;CSDN不然过审二、使用教程 2.1 快捷键操作与设置 设置 Setting——>按键映射——>选择顺手的系统快捷键 编写代码 CtrlShift Enter&#xff0c;语句完成。 “&#xff01;”&#xff0c;否定完成&#xff0c;输入表达式时按 …

微软.NET、.NET Framework和.NET Core联系和区别

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;看到不少初学者在学习编程语言的过程中如此的痛苦&#xff0c;我决定做点什么&#xff0c;我小时候喜欢看小人书&#xff08;连环画&#xff09;&#xff0c;在那个没有电视、没有手机的年代&#xff0c;这是…

abap 将xstring转换成PDF展示

收到外围系统的xstring之后&#xff0c;如何在sap中将其打开呢 1.创建一个屏幕 2.绘制一个customer control 3.创建流逻辑 4.流逻辑如下&#xff1a; DATA: go_html_container TYPE REF TO cl_gui_custom_container, go_html_control TYPE REF TO cl_gui_html_viewer, lv_u…

rust跟我学三:文件时间属性获得方法

图为RUST吉祥物 大家好,我是get_local_info作者带剑书生,这里用一篇文章讲解get_local_info是怎样获得杀毒软件的病毒库时间的。 首先,先要了解get_local_info是什么? get_local_info是一个获取linux系统信息的rust三方库,并提供一些常用功能,目前版本0.2.4。详细介绍地址…

React初探:从环境搭建到Hooks应用全解析

React初探&#xff1a;从环境搭建到Hooks应用全解析 一、React介绍 1、React是什么 React是由Facebook开发的一款用于构建用户界面的JavaScript库。它主要用于构建单页面应用中的UI组件&#xff0c;通过组件化的方式让开发者能够更轻松地构建可维护且高效的用户界面。 Reac…

Git的基本使用

一、Git架构 二、Git基本使用 创建版本库 在工作空间的目录中&#xff0c;右键“Git Bash Here”打开git终端 在Git终端中输入git init指令&#xff0c;创建版本库&#xff08;就是一个.git目录&#xff09; 查看版本库状态 git status将工作空间的修改添加到暂存区 git …

【汽车销售数据】2015~2023年各厂商各车型的探索 数据分析可视化

数据处理的思路&#xff1a; 1 各表使用情况&#xff1a; 汽车分厂商每月销售表&#xff0c;该表主要分析展示top10销量的厂商销量、占比变化情况&#xff08;柱形图、饼图&#xff09;&#xff1b;中国汽车分车型每月销售量表&#xff0c;该表主要分析展示top20销量的车型销…

基于springboot+uniapp的图书馆座位预约小程序(Java毕业设计)

大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的方法。无论你是…

MongoDB-数据库文档操作(2)

任务描述 文档数据在 MongoDB 中的查询和删除。 相关知识 本文将教你掌握&#xff1a; 查询文档命令&#xff1b;删除文档命令。 查询文档 我们先插入文档到集合 stu1 &#xff1a; document([{ name:张小华, sex:男, age:20, phone:12356986594, hobbies:[打篮球,踢足球…

【RT-DETR有效改进】轻量级视觉变换器RepViT改进特征提取网络(轻量化网络)

前言 大家好&#xff0c;我是Snu77&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持Re…

【生态适配】亚信安慧AntDB数据库与契约锁完成兼容互认

日前&#xff0c;亚信安慧AntDB数据库与上海亘岩网络科技有限公司&#xff08;简称:契约锁&#xff09;研发的契约锁电子签章产品完成兼容互认。经过双方团队的严格测试&#xff0c;亚信安慧AntDB数据库与契约锁&#xff08;V4&#xff09;完全兼容&#xff0c;整体运行稳定高效…

Docker-数据卷网络

docker数据卷 docker volume ls #查看有哪些数据卷 docker volume inspect mysql-db #查看具体数据卷的元信息 docker container run -d --name mysql1 -e MYSQL_ALLOW_EMPTY_PASSWORDTrue -v mysql-db:/var/lib/mysql mysql #会在docker 的卷下面新建一个mysqldb用于数据持久…

架构篇02-架构设计的历史背景

文章目录 机器语言&#xff08;1940 年之前&#xff09;汇编语言&#xff08;20 世纪 40 年代&#xff09;高级语言&#xff08;20 世纪 50 年代&#xff09;第一次软件危机与结构化程序设计&#xff08;20 世纪 60 年代~20 世纪 70 年代&#xff09;第二次软件危机与面向对象&…

使用Python+pygame实现贪吃蛇小游戏

使用Pythonpygame贪吃蛇小游戏 使用第三方库pygame&#xff0c;关于Python中pygame游戏模块的安装使用可见 https://blog.csdn.net/cnds123/article/details/119514520 给出两种实现。 第一种 运行效果如下&#xff1a; 游戏源码如下&#xff1a; import pygame import sy…

STM32——IIC知识总结及实战

1 IIC概念及结构体 IIC&#xff1a;Inter Integrated Circuit&#xff0c;集成电路总线&#xff0c;是一种同步 串行 半双工通信总线。 结构图 2 IIC协议时序 ① 起始信号 当 SCL 为高电平期间&#xff0c;SDA 由高到低的跳变。起始信号是一种电平跳变时序信号&#xff0c;而…