el-table 列里面嵌套 el-table

已于 2022-02-11 16:09:48 修改
阅读量6.8k 收藏 5
点赞数
分类专栏： Vuejs 文章标签： vue.js elementui 前端
于 2022-02-11 15:56:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42066070/article/details/122882351
版权
本文介绍如何在Vue.js应用中利用ElementUI实现表格内的嵌套表格，展示了具体的效果图，并详细讲解了实现该效果的步骤，特别关注了data数据的设置。
摘要由CSDN通过智能技术生成

一、达到的效果如下图：

二、实现流程

2

 <el-table :data="tableData" row-key="id" ref="evtTable">
          <!-- align="left" -->
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.hasChildren">
                <el-table-column
                  label="用户ID"
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="id"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
sunyin.liu
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论
专栏目录
订阅专栏
vue使用Element的el-table实现表格嵌套及表格内容的折叠效果
weixin_42841605的博客
06-29 1万+
vue+element，使用el-table实现表格嵌套及表格内容的折叠收起效果
element table表格嵌套
weixin_45907780的博客
11-23 1988
element el-table嵌套el-table
elementUI，el-table嵌套el-table，勾选联动效果
最新发布
qq_39918500的博客
06-30 367
el-table嵌套el-table
element-ui实现table表格的嵌套（table表格嵌套）功能实现
热门推荐
yehaocheng520的博客
05-19 3万+
最近在做电商类型的官网，希望实现的布局如下：有表头和表身，所以我首先想到的就是table表格组件。 表格组件中常见的就是：标题和内容一一对应： 像效果图中的效果，只用基础的表格布局是不行的，因此我想到了table表格中的展开功能： 然后通过：默认展开所有行 然后在里面的表格table中默认隐藏表头： 其他的则需要通过样式进行实现了 element-ui中table表格的嵌套（代码部分） <el-table v-bind:data="tableData" :default-expand-al
表格(el-table)里面嵌套表格(el-table)
song_song0927的博客
01-03 8877
表格内嵌套表格
【el-table】
qq_44559317的博客
02-17 3649
el-table 使用总结 实现树形数据与懒加载、列字段排序、表头固定、详情路由跳转、后端分页 手写树形表格并实现表头排序
el-table嵌套el-table
新人一枚，互相学习哦！
03-13 1477
el-table嵌套el-table
el-table表格嵌套
weixin_52115201的博客
08-08 1329
在父表嵌入相关联的子表，点击父表的当前行可以展开相关联的子表，再次点击会收起，使用的是type="expand"的属性。
el-table中的嵌套el-tab-pane嵌套el-table 设置dataRules解决记录
qq_42061351的博客
10-29 2365
嵌套关系如下： el-table |----el-tab-panel |--------el-table |------------el-table-column 按照网上给的方法，设置dataRules，发现不行。如果把prop改成planMap，dataRules中也设置相应的rule，能校验了，但是不管输入啥，都是报错，还有这个字段名就是name，不可能改后端返回的字段把。 这里采用手动加上校验的方法。 先写一个span，调一下样式 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存.
ElementUI用el-table实现表格内嵌套表格
香菜的博客
11-20 8241
el-table 实现表格内嵌套表格（宇宙无敌详细！！！一看就会！）
el-form嵌套el-table，表格必填
山谷里的杂货铺
11-10 1455
效果图： 目的： 实现表格中每一项都是必填项，如果没填，在提交时会发出警告。 代码： <el-form ref="detailForm" :model="detail" label-width="0"> <el-table v-loading="loading" :data="detail.appear" border highlight-current-row .
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
vue el-table实现自定义表头
10-15
自定义表头功能的实现，需要在el-table组件中使用template标签，并在其中嵌套el-table-column组件。el-table-column组件用于定义表格的列数据，而slot="header"则是在el-table-column内部使用，用于定义该列的表头。...
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
weixin_44875212的博客
03-21 1402
el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）
el-table表格嵌套子表格，对当前展开行内容修改，当前行默认展开
m0_50873766的博客
06-07 903
在设置type="expand"的el-table-column标签里插入<template slot-scope="props">来创建自定义模版，里面可以直接嵌入el-table表格，作为子表。如果数据是接口获取，完成操作后要刷新接口，获取最新数据，这样会发现，当前操作的子表默认不展开，如何刷新接口默认展开当前操作行；遇到子节点嵌套父节点，并带有表头，使用el-table树状结构，通常是不支持的。需要使用expand-row-keys属性，添加在父表，嵌套子表的位置。
el-table实现嵌套表格的展示
小阮的笔记本
02-20 2603
el-table嵌套表格展示。表单存在子表，列表展示子表
el-table 实现嵌套表格的思路及完整功能代码
sinat_33255495的博客
05-23 1080
这里总结以下要点啊，首先嵌套就是 el-table 中再套一个 el-table，但重点是子表格不要显示表头，而且样式要自己写，尤其是要通过重写表格样式。这里只是粗略实现了样式，需要的同学自行优化样式。
el-collapse里面嵌套el-table
07-20
您可以在el-collapse组件中嵌套el-table组件。以下是一个示例代码： ```html <el-collapse> <el-collapse-item title="表格"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </el-collapse-item> </el-collapse> ``` 在上面的示例中，我们将el-table包裹在el-collapse-item中，并将其作为el-collapse的子组件。您可以根据需要添加更多的el-collapse-item，并在每个项中放置不同的内容。 请注意，上述示例中使用了一个名为`tableData`的数据变量，您需要在Vue组件的data属性中定义这个变量，并为其提供实际的表格数据。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sunyin.liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值