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…

代码随想录day31 贪心算法初探

个人理解 就像卡哥视频里说的一样&#xff0c;感觉贪心算法确实没什么固定的套路&#xff0c;唯一的思路就是求局部最优解然后推广到全局最优解&#xff0c;但是什么是局部最优解&#xff0c;这个需要慢慢做题来摸索总结&#xff0c;有点像调参&#xff0c;蛮玄学的&#xff0c…

Git的基本使用

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

文件包含介绍

本地文件包含 常见的文件包含漏洞的形式为 <?php include("inc/" . $_GET[file]); ?> 考虑常用的几种包含方式为 同目录包含file.htaccess目录遍历?file…/…/…/…/…/…/…/…/…/var/lib/locate.db日志注入?file…/…/…/…/…/…/…/…/…/var/log/a…

【汽车销售数据】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:[打篮球,踢足球…

Divide The Students

最近&#xff0c;一群学生被伯兰州立大学计算机科学学院录取。现在编程老师想把他们分成三个小组进行练习。 老师知道很多程序员都在争论哪种语言是最好的。老师不想听到小组中的任何争论&#xff0c;所以她想把学生分成三个小组&#xff0c;这样就不会有一对属于同一小组的学生…

Python 发微信:实现自动化沟通的利器

引言&#xff1a; 在当今信息爆炸的时代&#xff0c;微信已经成为人们日常生活中不可或缺的沟通工具。然而&#xff0c;手动发送微信消息往往耗时耗力&#xff0c;尤其是在需要频繁发送消息的场景下。为了提高工作效率和便利性&#xff0c;我们可以利用 Python 编程语言来实现自…

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

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

2024华数杯数学建模A题思路模型代码论文

2024华数杯数学建模A题思路模型代码论文&#xff1a;1.17日开赛后第一时间更新&#xff0c;获取见文末名片 2024华数杯数学建模A题思路模型代码论文&#xff1a;1.17日开赛后第一时间更新&#xff0c;获取见文末名片 重要提示&#xff1a;优秀论文的解读十分重要&#xff01;&…