前端开发攻略---合并表格单元格,表格内嵌套表格实现手风琴效果。

news/2024/9/23 11:18:10/
htmledit_views">

1、演示

2、思路

1、用传统的 <table></table> 表格标签来实现比较麻烦。因此通过模拟  表格标签 的写法用<div></div>来实现

2、表头和表格列数是相同的,因此可以确定代码结构

html"><div class="table"><div class="header"><div class="th"></div><div class="th"></div><div class="th"></div><div class="th"></div><div class="th"></div></div><div class="body"><div class="tr"><div class="td"></div><div class="td"></div><div class="td"></div><div class="td"></div><div class="td"></div></div></div></div>

3、上述代码表示为一个一行五列的表格

4、通过flex进行布局

5、通过数组的长度来平分嵌套表格每一列的宽度/高度

3、全部代码

html"><template><div class="table"><div class="header"><div class="th">Id</div><div class="th">名字</div><div class="th">年龄</div><div class="th">朋友</div><div class="th">性别</div></div><div class="body"><div class="tr" v-for="(item, index) in data"><div class="td">{{ item.id }}</div><div class="td">{{ item.name }}</div><div class="td">{{ item.age }}</div><div class="td" style="flex-direction: column"><p @click="item.hide = !item.hide">展开详情</p><divclass="content":style="{ height: item.hide ? '0px' : `${item.detail.length * 36}px` }":class="item.hide ? '' : 'haveTopBorder'":key="index"><div class="content-row" v-for="item1 in item.detail"><div class="content-td" v-for="item2 in item1" :style="{ '--l': item1.length }">{{ item2 }}</div></div></div></div><div class="td">是</div></div></div></div>
</template><script setup>
import { ref, reactive } from 'vue'const data = ref([{id: 1,name: '刘备',age: '18',detail: [['1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111'],['1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111'],['1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111'],['1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111'],],status: '男',hide: false,},{id: 2,name: '张飞',age: '50',detail: [['1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111', '', '1111'],['1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111', '1111'],],status: '男',hide: false,},{id: 3,name: '关羽',age: '29',detail: [['', '1111', '1111', '1111', '1111', '1111', '', '1111', '1111', '', '1111'],['1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111', '1111', ''],['1111', '', '1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111'],['1111', '', '1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111'],['1111', '', '1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111'],['1111', '', '1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111'],['1111', '', '1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111'],['1111', '', '1111', '1111', '', '1111', '1111', '1111', '1111', '1111', '1111'],],status: '男',hide: false,},
])
</script><style scoped lang="scss">
* {box-sizing: border-box;margin: 0;padding: 0;
}
.table {width: 1000px;border: 1px solid #eee;font-size: 14px;.header {display: flex;justify-content: space-between;align-items: stretch;background-color: #b6bece;color: #3c3c3c;padding: 8px 0;.th {padding-left: 8px;}}.body {width: 100%;.tr {display: flex;width: 100%;justify-content: space-between;align-items: stretch;border-bottom: 1px solid #eee;.td {border-right: 1px solid #eee;padding: 8px 4px;display: flex;justify-content: flex-start;align-items: center;}.td:last-child {border-right: 0;}}.tr:last-child {border-bottom: 0;}p {width: 100%;display: flex;align-items: center;text-align: left;padding: 8px 0;cursor: pointer;user-select: none;}}.th,.td {text-align: left;}.th:nth-child(1),.td:nth-child(1) {width: 70px;}.th:nth-child(2),.td:nth-child(2) {width: 100px;}.th:nth-child(3),.td:nth-child(3) {width: 130px;}.th:nth-child(4),.td:nth-child(4) {flex: 1;padding: 0 !important;}.th:nth-child(5),.td:nth-child(5) {width: 70px;}.content {width: 100%;overflow: hidden;transition: height 0.2s;.content-row {display: flex;width: 100%;border-bottom: 1px solid #eee;.content-td {padding: 8px;width: calc(100% / var(--l));border-right: 1px solid #eee;}.content-td:last-child {border-right: 0;}}.content-row:last-child {border-bottom: 0;}.content-row:nth-child(even) {background-color: rgb(116, 182, 218);}}.haveTopBorder {border-top: 1px solid #eee;}
}
</style>

4、温馨提示

您可以找个干净的页面直接整个复制,根据您的需求更改即可


http://www.ppmy.cn/news/1429624.html

相关文章

正确的原因是错误的:可解释的 ML 技术能否检测出虚假相关性?

Right for the Wrong Reason: Can Interpretable ML Techniques Detect Spurious Correlations? 摘要 虽然深度神经网络模型提供了无与伦比的分类性能&#xff0c;但它们容易在数据中学习虚假相关性。如果测试数据与训练数据来自相同的分布&#xff0c;则使用性能指标很难检…

【面试题】MySQL 事务的四大特性说一下?

事务是一个或多个 SQL 语句组成的一个执行单元&#xff0c;这些 SQL 语句要么全部执行成功&#xff0c;要么全部不执行&#xff0c;不会出现部分执行的情况。事务是数据库管理系统执行过程中的一个逻辑单位&#xff0c;由一个有限的数据库操作序列构成。 事务的主要作用是保证数…

区块链技术入门:基础、应用及未来展望

区块链技术&#xff0c;自比特币在2009年首次引入以来&#xff0c;已经迅速成为数字时代的一个重要技术。区块链不仅仅是加密货币的基础技术&#xff0c;其去中心化、透明、不可篡改的特点使其在多个领域显示出广泛的应用潜力。这里&#xff0c;我们将探讨区块链的基础知识、实…

编写Spark独立应用程序

执行本文之前&#xff0c;先搭建好spark的开发环境&#xff0c;我目前只搭建了standalone模式&#xff0c;参考链接 &#xff1a; Spark Standalone模式部署-CSDN博客 1. 安装sbt 1&#xff09;下载sbt 网址&#xff1a;https://www.scala-sbt.org/download.html &#xff0c…

Rust入门-所有权

一、为什么、是什么、怎么用 1、为什么Rust要提出一个所有权和借用的概念 所有的程序都必须和计算机内存打交道&#xff0c;如何从内存中申请空间来存放程序的运行内容&#xff0c;如何在不需要的时候释放这些空间&#xff0c;成为所有编程语言设计的难点之一。 主要分为三种…

恒峰智慧科技-太阳能语音杆:一杆多用,节能环保新选择!

随着科技的发展&#xff0c;人们对于户外设备的便利性要求越来越高。在森林中&#xff0c;我们常常会遇到各种问题&#xff0c;如寻找方向、接收通讯信号等。为了解决这些问题&#xff0c;太阳能语音杆应运而生。它不仅具有传统旗杆的功能&#xff0c;还具备了多项实用的智能化…

B. Our Tanya is Crying Out Loud

链接 : https://codeforces.com/problemset/problem/940/B 思路 : 1 . 如果当前n是k的倍数&#xff0c;可变为n/k , 操作一代价 : x (n-n/k)*a , 操作二代价 : y b , 如果 x<y,那么直接ans (n-1)*a&#xff0c;输出ans返回即可(后面的n只会更小&#xff0c;x也就会更…

手写一个Spring IOC框架

目录 一&#xff0c;Spring IOC 二&#xff0c;流程图设计 三&#xff0c;设计思路解析 三&#xff0c;开始写代码 1.准备工作: 2.扫描并加载类信息 3.初始化bean 4.测试一下 一&#xff0c;Spring IOC Spring IoC容器是Spring框架的核心&#xff0c;它通过读取配置信息…