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

devtools/2024/9/23 14:35:31/
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/devtools/8851.html

相关文章

逻辑自洽地区分【左值与右值】

前言 由于不同的文章和书籍&#xff0c;对左值和右值的区分皆有不同&#xff0c;这里我只是给自己定了一个逻辑可以自洽的标准&#xff0c;供自己去区分左值和右值&#xff0c;所以本篇博客&#xff0c;属于一个笔记。 C primer对左值和右值的介绍 C中的表达式&#xff1a;要么…

Python基于flask的豆瓣电影分析可视化系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

安卓xml存储读取和sharedpreferences文件存储读取

起因今天有人问到我 xml文件存储读取和sharedpreferences读写该咋做&#xff0c;能不能帮忙写个案例&#xff0c;这里我简单写出一个案例&#xff0c;一下是全部的代码 一、首先引入 权限 <uses-permission android:name"android.permission.WRITE_EXTERNAL_STORAGE&q…

开票系统无法对接电商平台,如何高效开票?

近几年&#xff0c;电商行业的税务问题一直是热议话题&#xff0c;电商行业发票涉税管理越来越严格&#xff0c;“不开、漏开、迟开”行为会给电商商家和企业带来一定风险&#xff0c;所以电商行业对于开票系统的需求越来越多&#xff0c;但是有部分开票系统无法对接电商平台&a…

oracle 19c数据库W00n进程使用很多PGA内存资源的分析

今天&#xff0c;客户反馈测试环境的数据库PGA资源不足&#xff0c;报错ORA-04036: 实例使用的 PGA 内存超出 PGA_AGGREGATE_LIMIT&#xff1b;分析是多个W00n进程使用大量PGA-触发了BUG&#xff0c;对应解决办法就是打补丁。&#xff08;民间办法就是KILL进程、重启数据库&…

Vue2 基础四前后端交互

代码下载 前后端交互模式 接口调用方式&#xff1a;原生ajax、基于jQuery的ajax、fetch、axios。 URL 地址格式 传统形式的 URL 格式&#xff1a;schema://host:port/path?query#fragment schema&#xff1a;协议。例如http、https、ftp等host&#xff1a;域名或者IP地址…

完成学校官网页面制作

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>教务系统</title> <style> .wap{ margin:0 auto; width:955px; } .top{ height:150px; padding-left:85px; …

软件测试金三银四招聘季,好公司10大特点VS烂公司10大特点

选择公司&#xff0c;就是在选自己未来的命运。 遇到一家好公司&#xff0c;你未来的职业道路&#xff0c;生活水平&#xff0c;工作热情&#xff0c;技术提升都是积极生长的。 但遇到一家烂公司&#xff0c;你未来的一年甚至几年&#xff0c;都将处在水深火热之中。 有时候仅仅…