Element Plus <el-table> 组件之展开行Table在项目中使用

目录

官方样式:

展开前:

展开:

原始代码:

代码详解:

项目使用场景:

完成效果:

具体实现范本:

1.调整数据结构

2. 修改标签和数据绑定

3. JavaScript 部分导入和创建对象

4.注意


官方样式:

展开前:

展开:

 原始代码:

<template>switch parent border: <el-switch v-model="parentBorder" /> switch childborder: <el-switch v-model="childBorder" /><el-table :data="tableData" :border="parentBorder" style="width: 100%"><el-table-column type="expand"><template #default="props"><div m="4"><p m="t-0 b-2">State: {{ props.row.state }}</p><p m="t-0 b-2">City: {{ props.row.city }}</p><p m="t-0 b-2">Address: {{ props.row.address }}</p><p m="t-0 b-2">Zip: {{ props.row.zip }}</p><h3>Family</h3><el-table :data="props.row.family" :border="childBorder"><el-table-column label="Name" prop="name" /><el-table-column label="State" prop="state" /><el-table-column label="City" prop="city" /><el-table-column label="Address" prop="address" /><el-table-column label="Zip" prop="zip" /></el-table></div></template></el-table-column><el-table-column label="Date" prop="date" /><el-table-column label="Name" prop="name" /></el-table>
</template><script lang="ts" setup>
import { ref } from 'vue'const parentBorder = ref(false)
const childBorder = ref(false)
const tableData = [{date: '2016-05-03',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',family: [{name: 'Jerry',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Spike',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Tyke',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},],},{date: '2016-05-02',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',family: [{name: 'Jerry',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Spike',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Tyke',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},],},{date: '2016-05-04',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',family: [{name: 'Jerry',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Spike',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Tyke',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},],},{date: '2016-05-01',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',family: [{name: 'Jerry',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Spike',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Tyke',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},],},{date: '2016-05-08',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',family: [{name: 'Jerry',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Spike',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Tyke',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},],},{date: '2016-05-06',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',family: [{name: 'Jerry',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Spike',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Tyke',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},],},{date: '2016-05-07',name: 'Tom',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',family: [{name: 'Jerry',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Spike',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},{name: 'Tyke',state: 'California',city: 'San Francisco',address: '3650 21st St, San Francisco',zip: 'CA 94114',},],},
]
</script>

代码详解:

  • 首先,根据 v-model 指令,在 Vue 的 setup() 中定义了 parentBorderchildBorder 两个响应式变量,分别用于控制父表格和子表格的边框显示与隐藏。
  • 然后,通过传入数据数组 tableData<el-table>:data 属性,将数据渲染为表格。同时,使用 :border 属性绑定了 parentBorderchildBorder 变量,以实现动态控制表格边框的显示与隐藏。
  • 在表格中,使用 <template> 标签和 #default 的语法糖来定义扩展列中的内容。扩展列通过点击图标或者行展开按钮来显示更多详细信息。
  • 在扩展列中,使用了 <el-table> 嵌套来展示家庭成员的信息。同样地,也使用了 :border 属性绑定了 childBorder 变量,以便动态控制子表格边框的显示。
  • 在展示每个家庭成员的信息时,使用了 <p><h3> 标签来显示不同的文本内容,其中 <h3> 标签用于显示 "Family" 这个标题。

项目使用场景:

项目中有一对多的数据想要展示,例如:一个团队对应多个成员,父表格展示团队信息,子表格展示对应成员信息

完成效果:

父表格展示团队信息,子表格展示对应成员信息

具体实现范本:

1.调整数据结构

根据你的数据库中的表结构,创建一个适当的数据结构来存储团队信息和成员信息。可以使用 JavaScript 对象或数组的形式来表示

const teamData = [{teamName: 'Team A',teamMembers: [{ name: 'John', age: 25, position: 'Manager' },{ name: 'Alice', age: 30, position: 'Developer' },{ name: 'Bob', age: 28, position: 'Designer' }]},{teamName: 'Team B',teamMembers: [{ name: 'Mike', age: 32, position: 'Manager' },{ name: 'Sarah', age: 27, position: 'Developer' },{ name: 'Emily', age: 29, position: 'Designer' }]},// ... 可以添加更多的团队信息
];

在这个例子中,teamData 数组包含了多个团队对象,每个团队对象都有团队名称 teamName 和团队成员数组 teamMembers

每个团队成员对象都包含了成员的姓名 name、年龄 age 和职位 position

2. 修改标签和数据绑定

<el-table :data="teamData" :border="parentBorder" style="width: 100%"><el-table-column type="expand"><template #default="props"><div><h3>Team Name: {{ props.row.teamName }}</h3><el-table :data="props.row.teamMembers" :border="childBorder"><el-table-column label="Name" prop="name" /><el-table-column label="Age" prop="age" /><el-table-column label="Position" prop="position" /></el-table></div></template></el-table-column><el-table-column label="Team Name" prop="teamName" />
</el-table>

在这个修改后的代码中,将标签中的 tableData 修改为 teamData。在父表格中,使用 teamData 数组作为数据源,并绑定到 <el-table>:data 属性上。

在扩展列中,使用 props.row 来获取当前团队对象的信息,包括团队名称和团队成员数组。然后通过嵌套的 <el-table> 组件来展示每个团队成员的信息,使用 props.row.teamMembers 作为数据源。

<el-table-column> 标签中的 prop 属性与数据对象的属性名进行绑定,以正确地显示每个成员的姓名、年龄和职位。

3. JavaScript 部分导入和创建对象

import { ref } from 'vue';// ...const parentBorder = ref(false);
const childBorder = ref(false);
const teamData = [// 数据结构和示例中的相同
];
  • 在这个示例代码中,导入了 ref 函数,并在 setup() 中使用它来创建父表格和子表格边框的开关变量 parentBorderchildBorder
  • 你可以根据需要设置默认的开关状态,或者根据用户的操作来改变它们的值。
  • 通过以上步骤,你已经成功地修改了代码,使其能够展示父表格和子表格,并以团队信息和成员信息的形式呈现。请根据你的实际情况调整数据结构和样式,并根据需求修改其他相关部分

4.注意

对于 teamMember 的类型定义,可以使用一个包含成员信息的对象数组。每个成员对象可以包含学号、姓名、专业、年级等属性

interface TeamMember {studentID: string;studentName: string;major: string;grade: string;lab: string;
}interface Team {teamName: string;projectName: string;projectIntro: string;coach: string;contest: string;award: string;teamMember: TeamMember[];
}

在这个定义中,teamMember 属性的类型被修改为 TeamMember[],表示一个 TeamMember 对象的数组。每个 TeamMember 对象包含了学生的学号、姓名、专业、年级等信息。

 

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

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

相关文章

综合能源系统(8)——综合能源系统支撑技术

综合能源系统关键技术与典型案例  何泽家&#xff0c;李德智主编 1、大数据技术 1.1、大数据技术概述 大数据是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合&#xff0c;是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高…

wps设置其中几页为横版

问题&#xff1a;写文档的时候&#xff0c;有些表格列数太多&#xff0c;页面纵向显示内容不完整&#xff0c;可以给它改成横向显示。 将鼠标放在表格上一页的底部&#xff0c;点击‘插入-分页-下一页分节符’。 将鼠标放在表格页面的底部&#xff0c;点击‘插入-分页-下一页分…

【Docker入门第一篇】

Docker简介 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。 容器是完全使…

《数字图像处理-OpenCV/Python》连载(2)目录

《数字图像处理-OpenCV/Python》连载&#xff08;2&#xff09;目录 本书京东优惠购书链接&#xff1a;https://item.jd.com/14098452.html 本书CSDN独家连载专栏&#xff1a;https://blog.csdn.net/youcans/category_12418787.html 第一部分 OpenCV-Python的基本操作 第1章 …

Redis多机实现

Background 为啥要有多机--------------1.容错 2.从服务器分担读压力。 主从结构一大难题------------如何保障一致性&#xff0c;对这个一致性要求不是很高&#xff0c;因为redis是用来做缓存的 同时我们要自动化进行故障转移-------哨兵机制&#xff0c;同时哨兵也可能cra…

江西南昌电气机械三维测量仪机械零件3d扫描-CASAIM中科广电

精密机械零部件是指机械设备中起到特定功能的零件&#xff0c;其制造精度要求非常高。这些零部件通常由金属、塑料或陶瓷等材料制成&#xff0c;常见的精密机械零部件包括齿轮、轴承、螺丝、活塞、阀门等。精密机械零部件的制造需要高精度的加工设备和工艺&#xff0c;以确保其…

HJ31 单词倒排 题解

题目描述&#xff1a;单词倒排_牛客题霸_牛客网 (nowcoder.com) 对字符串中的所有单词进行倒排。 1、构成单词的字符只有26个大写或小写英文字母&#xff1b; 2、非构成单词的字符均视为单词间隔符&#xff1b; 3、要求倒排后的单词间隔符以一个空格表示&#xff1b;如果原字符…

opencv 车牌的定位与分割+UI界面

目录 一、实现和完整UI视频效果展示 主界面&#xff1a; 识别结果界面&#xff1a; 查看分割处理过程图片界面&#xff1a; 二、原理介绍&#xff1a; 加权灰度化 ​编辑 二值化 滤波降噪处理 锐化处理 边缘特征提取 图像分割 完整演示视频&#xff1a; 代码链接 …

musl libc ldso 动态加载研究笔记:动态库的搜索路径

前言 在手动设置动态库的存放路径的情况下&#xff0c;发现 musl ldso 依旧可以加载位于 /lib 目录下的 动态共享库 动态库的存放路径或者说搜索路径&#xff0c;是否可以手动配置&#xff1f;比如 Linux 上 有个配置文件可以配置&#xff0c;可以改变 动态库的搜索次序&#…

【1-3章】Spark编程基础(Python版)

课程资源&#xff1a;&#xff08;林子雨&#xff09;Spark编程基础(Python版)_哔哩哔哩_bilibili 第1章 大数据技术概述&#xff08;8节&#xff09; 第三次信息化浪潮&#xff1a;以物联网、云计算、大数据为标志 &#xff08;一&#xff09;大数据 大数据时代到来的原因…

Unity之 Vector3 的详细介绍以及方法的介绍

文章目录 总的介绍小试牛刀相关的描述的参数看个小例子 总的介绍 当涉及到Unity中的Vector3类时&#xff0c;以下是一些常用的方法和操作&#xff1a; magnitude 方法&#xff1a;返回向量的长度。 float length vector.magnitude;sqrMagnitude 方法&#xff1a;返回向量的平…

恒运资本:信创概念再度活跃,华是科技再创新高,南天信息等涨停

信创概念21日盘中再度活跃&#xff0c;截至发稿&#xff0c;华是科技涨超17%&#xff0c;盘中一度触及涨停再创新高&#xff0c;中亦科技涨超13%亦创出新高&#xff0c;久其软件、南天信息、新炬网络、英飞拓均涨停。 音讯面上&#xff0c;自8月3日以来&#xff0c;财政部官网连…

Dockerfile制作镜像与搭建LAMP环境

1、编写Dockerfile制作Web应用系统nginx镜像&#xff0c;生成镜像nginx:v1.1&#xff0c;并推送其到私有仓库。 具体要求如下&#xff1a; &#xff08;1&#xff09;基于centos基础镜像&#xff1b; &#xff08;2&#xff09;指定作者信息&#xff1b; &#xff08;3&#x…

Window Server 与 Windows 系统开关机日志查看方法

目录 Windows/Windows Server 查看日志Windows 系统常用的事件 ID 环境&#xff1a;Windows Server 2019 &#xff08;也适用于 Windows 其他系统&#xff09;。 不同版本的 Windows 图标可能有所不同&#xff0c;但是服务器级 Windows Server 与普通桌面级 Windows 还会有些操…

CTFshow——web入门——反序列化web254-web278 详细Writeup

前言 在做题之前先简要总结一下知识点 private变量会被序列化为&#xff1a;\x00类名\x00变量名 protected变量会被序列化为: \x00\*\x00变量名 public变量会被序列化为&#xff1a;变量名__sleep() &#xff1a;//在对象被序列化之前运行__wakeup() //将在反序列化之后立即…

Spring6.0官方文档示例:(27)配置文件中bean定义的继承关系

一、实体类 package cn.edu.tju.domain;public class DerivedTestBean {private String name;private int age;public String getName() {return name;}public void setName(String name) {this.name name;}public int getAge() {return age;}public void setAge(int age) {t…

洗涤护理门店小程序DIY制作教程

随着移动互联网的快速发展&#xff0c;小程序成为了各行各业推广和服务的新平台。对于干洗店来说&#xff0c;拥有一个专属的洗护小程序不仅可以提升用户体验&#xff0c;还能增加店铺的曝光度和销售额。那么&#xff0c;如何DIY制作一个干洗店洗护小程序呢&#xff1f; 首先&a…

SpringBoot利用ConstraintValidator实现自定义注解校验

一、前言 ConstraintValidator是Java Bean Validation&#xff08;JSR-303&#xff09;规范中的一个接口&#xff0c;用于实现自定义校验注解的校验逻辑。ConstraintValidator定义了两个泛型参数&#xff0c;分别是注解类型和被校验的值类型。在实现ConstraintValidator接口时&…

控制Unity发布的PC包的窗体

大家好&#xff0c;我是阿赵。   用Unity发布PC包接入某些渠道时&#xff0c;有时候会收到一些特殊的需求&#xff0c;比如控制窗口最大化(比如某些情况强制显示窗体)、最小化(比如老板键)、强制规定窗体置顶等。虽然我一直认为这些需求都是流氓软件行为&#xff0c;但作为一…

基于Spark+django的国漫推荐系统--计算机毕业设计项目

近年来&#xff0c;随着互联网的蓬勃发展&#xff0c;企事业单位对信息的管理提出了更高的要求。以传统的管理方式已无法满足现代人们的需求。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;随着各行业的不断发展&#xff0c;基…