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

news2024/11/24 9:18:00

目录

官方样式:

展开前:

展开:

原始代码:

代码详解:

项目使用场景:

完成效果:

具体实现范本:

1.调整数据结构

2. 修改标签和数据绑定

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

4.注意


官方样式:

展开前:

展开:

 原始代码:

<template>
  switch parent border: <el-switch v-model="parentBorder" /> switch child
  border: <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.coloradmin.cn/o/902491.html

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

相关文章

浅谈日常使用的 Docker 底层原理-三大底座

适合的读者&#xff0c;对Docker有过简单了解的朋友&#xff0c;想要进一步了解Docker容器的朋友。 前言 回想我这两年&#xff0c;一直都是在使用 Docker&#xff0c;看过的视频、拜读过的博客&#xff0c;大都是在介绍 Docker 的由来、使用、优点和发展趋势&#xff0c;但对…

路由跳转--编程式导航

简介 除了使用 创建 a 标签来定义导航链接&#xff0c;我们还可以通过编程式导航实现导航。所谓编程式导航指的是不通过router-link跳转&#xff0c;而是借助 router 的实例&#xff0c;通过代码的方式跳转。 示例&#xff1a; App.vue <template><div id"ap…

正演的数值模拟(零基础,学习中)

摘要: 本贴从零开始学习正演的数值模拟方法. 1. 偏微分基础 引例: 物体从一维坐标的原点开始移动, 在 t t t 时刻, 它在坐标轴的位置由函数 s ( t ) s(t) s(t) 确定, 则速度为位置变化量与时间的比值: v ( t ) d s ( t ) d t lim ⁡ Δ t → 0 s ( t Δ t ) − s ( t )…

HDFS存储魔法解析:在二次元世界中跃动的数据冒险

文章目录 版权声明零 引缘起一 存储原理二 fsck命令2.1 副本块数量的配置2.1.1 全局设置方式2.1.2 临时设置方式 2.2 检查文件的副本数2.3 block大小和复制策略配置 三 NameNode元数据3.1 edits文件3.2 fsimage文件3.3 NameNode元数据管理维护3.4 元数据合并控制参数3.5 Checkp…

热门歌曲的伴奏--源代码

目录 使用方法 《起风了》歌词伴奏 《起风了》歌词 《生日歌》歌词伴奏 《生日歌》歌词 《童话》歌词伴奏 《童话》歌词 《光阴的故事》歌词伴奏 《光阴的故事》歌词 ​《千本樱》歌词伴奏 《千本樱》中文歌词 《平凡之路》歌词伴奏 《平凡之路》歌词 《孤勇者》…

Linux-在Ubuntu搭建ftp服务器

By: Ailson Jack Date: 2023.08.20 个人博客&#xff1a;http://www.only2fire.com/ 本文在我博客的地址是&#xff1a;http://www.only2fire.com/archives/151.html&#xff0c;排版更好&#xff0c;便于学习&#xff0c;也可以去我博客逛逛&#xff0c;兴许有你想要的内容呢。…

EndNote(一)【界面+功能介绍】

EndNote界面&#xff1a; 顶上小图标的介绍&#xff1a; ①&#xff1a;同步 ②&#xff1a;分享 ③&#xff1a;检索全文 对于第三个&#xff08;检索全文的功能&#xff09;&#xff1a; &#xff08;不做任何操作的情况下的界面&#xff0c;检索全文的按钮是灰的&…

详解:Mybatis参数获取和动态SQL以及分页功能

详解&#xff1a;Mybatis参数获取和动态SQL以及分页功能 前置准备项目结构在pom文件导入依赖创建properties配置文件创建Mapper接口创建Mapper映射文件SqlSession对象创建对应的表在数据库中实体类 SQL语句中的参数获取单个参数两个参数比较参数找不到的情况单个参数&#xff0…

C语言小练习(一)

&#x1f31e; “人生是用来体验的&#xff0c;不是用来绎示完美的&#xff0c;接受迟钝和平庸&#xff0c;允许出错&#xff0c;允许自己偶尔断电&#xff0c;带着遗憾&#xff0c;拼命绽放&#xff0c;这是与自己达成和解的唯一办法。放下焦虑&#xff0c;和不完美的自己和解…

自动方向识别式 TXB型电平转换芯片

大家好,这里是大话硬件。 在上一篇文章分析了LSF型的电平转换芯片,LSF型电平转换芯片最常见是应用在I2C总线上。I2C为OD型总线,LSF使用时增加电阻。 对于不是OD型总线的电平转换,比如UART,SPI,普通GPIO口信号,这些信号在进行双向电平转换使用什么样的芯片呢? 从上面…

Python写一个创意五子棋游戏

前言 在本教程中&#xff0c;我们将使用Python的Tkinter库和OpenAI的GPT-3模型构建一个简单的对话弹窗软件&#xff0c;用于与老板进行对话。我们将介绍如何创建图形用户界面、集成OpenAI API以生成回复&#xff0c;并提供一些进一步的扩展和优化建议。 &#x1f4dd;个人主页→…

岩土工程安全监测隧道中使用振弦采集仪注意要点?

岩土工程安全监测隧道中使用振弦采集仪注意要点&#xff1f; 岩土工程的安全监测是非常重要的&#xff0c;它可以帮助工程师及时发现可能存在的问题&#xff0c;并及时解决&#xff0c;保障施工进度以及施工质量&#xff0c;保障工程的安全运行。其中&#xff0c;振弦采集仪是…

Liunx系统编程:进程信号的概念及产生方式

目录 一. 进程信号概述 1.1 生活中的信号 1.2 进程信号 1.3 信号的查看 二. 信号发送的本质 三. 信号产生的四种方式 3.1 按键产生信号 3.2 通过系统接口发送信号 3.2.1 kill -- 向指定进程发送信号 3.2.2 raise -- 当自身发送信号 3.2.3 abort -- 向自身发送进程终止…

Docker修改daemon.json添加日志后无法启动的问题

docker实战(一):centos7 yum安装docker docker实战(二):基础命令篇 docker实战(三):docker网络模式(超详细) docker实战(四):docker架构原理 docker实战(五):docker镜像及仓库配置 docker实战(六):docker 网络及数据卷设置 docker实战(七):docker 性质及版本选择 认知升…

视频转云存的痛点

现在运营商体系里面&#xff0c;有大量的视频转云存储的需求&#xff0c;但是视频云存储有一个比较大的痛点&#xff0c;就是成本&#xff01; 成本一&#xff1a;存储成本&#xff1b; 我们以1000路2M视频转云存&#xff0c;存储时间为90天为例&#xff08;B端存储时间有时候…

明星都偏爱的多燕瘦活酵素,不含非法添加事件更健康

不少瘦身人士信奉“运动就能瘦”的准则&#xff0c;每天坚持高强度运动&#xff0c;一段时间后却发现&#xff0c;不仅体重没有下降&#xff0c;甚至整个人看起来都变得更加壮实了&#xff0c;这是为什么&#xff1f; 首先&#xff0c;运动是分为减脂和增肌两种类型的&#xff…

我的创作纪念日 - CSDN创作者4周年,感谢平台,未来可期!

CSDN创作者4周年&#xff0c;感谢平台&#xff0c;未来可期&#xff01; 不知不觉已经加入这个平台4周年了&#xff0c;恍惚昨日之景&#xff0c;有些事情&#xff0c;你不在意&#xff0c;平台却已经写好了程序来给它画上了标记&#xff0c;思想无线&#xff0c;故程序也无边…

Vulnhub靶机系列 Hackadmeic.RTB1

系列&#xff1a;Hackademic&#xff08;此系列共2台&#xff09; 难度&#xff1a;初级 信息收集 主机发现 netdiscover -r 192.168.80.0/24端口扫描 nmap -A -p- 192.168.80.143访问80端口 使用指纹识别插件查看是WordPress 根据首页显示的内容&#xff0c;点击target 点击…

(已解决)PySpark : AttributeError: ‘DataFrame‘ object has no attribute ‘iteritems‘

AttributeError: ‘DataFrame’ object has no attribute ‘iteritems’ 原因在使用SparkSession对象中createDataFrame函数想要将pandas的dataframe转换成spark的dataframe时出现的 因为createDataFrame使用了新版本pandas弃用的iteritems()&#xff0c;所以报错 解决办法&…

webSocket 开发

1 认识webSocket WebSocket_ohana&#xff01;的博客-CSDN博客 一&#xff0c;什么是websocket WebSocket是HTML5下一种新的协议&#xff08;websocket协议本质上是一个基于tcp的协议&#xff09;它实现了浏览器与服务器全双工通信&#xff0c;能更好的节省服务器资源和带宽…