【记录：el-table点击同一行的不同单元格展示不同内容】

已于 2022-09-29 09:05:27 修改
阅读量533 收藏 1
点赞数 2
文章标签： vue.js 前端 javascript
于 2022-09-27 10:29:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanlingLuo98/article/details/127066492
版权

1.前言

技术：vue2
效果：默认风琴效果，只能展开一个，不能同时展开多个。

2.代码图

  • table数据处理
    手风琴效果实现代码部分
  • 在这里插入图片描述
    明细事件
  • 在这里插入图片描述
    采购sn事件
  • 在这里插入图片描述
    事件绑定方式
  • 两个方法的绑定处
    采购渲染部分
    在这里插入图片描述
    采购sn渲染部分
    在这里插入图片描述

3.效果截屏

不开展默认效果
在这里插入图片描述
明细打开
在这里插入图片描述
采购sn打开
在这里插入图片描述

贝果宝~
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
element ui table（表格）实现点击一行展开功能
10-17
主要给大家介绍了关于element ui table（表格）实现点击一行展开功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element table 点击按钮实现展开效果
canyi8023的博客
02-16 2367
先给展示一下效果 在这块实现点击开关按钮实现展开收起，使用到了官网提供的toggleRowExpansion方法来实现， <el-table-column width="180"> <template slot-scope="scope"> <el-switch v-model="scope.row.isSwitch @chan.
Element UI中el-table中的expand展开表格功能，实现手风琴效果（适用低版本elementUI）
weixin_42452567的博客
07-07 1911
//示例代码 <template> <el-table :data="tableData" :row-key="getRowKeys" :expand-row-keys="expands" @current-change="toggleRowExpansion" > <el-table-column type="expand"> <el-table :data="tableExpandData
elementui table组件，根据数据的不同，显示不同的内容
weixin_30477797的博客
07-08 2973
<template> 　　<div class="padding20"> 　　　　<div class="publicTable"> 　　　　　　<el-table :data="configureList" border style="width: 100%" :header-cell-style="{background:'#dae1...
element table表格行展开列表的实现
cxz
09-13 1449
UI图 难点 element UI 并没有可以照搬的，只能我们自己对样式修改还原 下面展开的项 能够和上面 对齐 自适应屏幕缩放 已实现效果 屏幕自适应 可以看到基本效果已经实现出来了，剩下的一点也是小修小补了 实现代码 html结构 <el-table :data="tableData" class="table" row-class-name="table-row" cell-class-name="table-cell"> <el-table-column type=
源码：el-table和Echarts折线图【表-图两者联动】显示tooltip效果【表-图-表三者联动】展示数据
03-17
【Vue入门实践4】el-table和Echarts折线图【表-图两者联动】显示tooltip效果【表-图-表三者联动】展示数据 资源相关文章https://mp.csdn.net/mp_blog/creation/editor/123230346
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
vue el-table实现行内编辑功能
10-15
在Vue.js中，Element UI库提供了丰富的UI组件，其中`el-table`是用于展示表格数据的一个强大组件。本文将详细讲解如何在Vue项目中利用Element UI的`el-table`实现行内编辑功能。 首先，我们需要在`el-table`的表头...
vue3 + element plus el-table expand 实现按钮展开行 且在展开时查询数据
Geeca的博客
05-15 6236
vue3 + element plus el-table 实现隐藏左侧小箭头，右侧按钮展开行，且在展开行时查询数据
elementui的table展开行显示另一关联子table表的数据
09-05 2652
主表table可实现展开行显示关联子table的列表数据​
Element-ui中el-table展开行
m0_51431448的博客
05-17 8031
展开行在el-table中以及提供了，使用也很简单，不过就是它只能点击左侧箭头icon来控制展开收缩，我这里是点击行的就要展开收缩。所以还需要借助 row-click和expand-change结合（因为点击icon的时候不会触发row-click），然后展开的时候就得通过设置expand-row-keys这个来控制收缩，注意使用这个必须要设置row-key
el-table展开行 +懒加载 实现内部表格嵌套
weixin_38912662的博客
04-24 3383
在开发过程中需要在表格展开行中再嵌套一个表格,当element自带的组件满足不了（外层表格数据和内层表数据由两个接口提供）,需要用类似懒加载的功能实现，所以选择采用展开行 + expand-change事件来实现。 实现中遇到的问题 通过展开行+ expand-change实现时,遇到一个很大的问题,就是el-table组件在更新数据内部某个属性值时,并不能实时刷新dom视图,这样会导致每次在expand-change事件中获取到内层表格数据后，给父层数据中添加属性时视图并未刷新。 解决方法 需要.
el-table自定义展开行
weixin_48005976的博客
09-27 5333
el-table自定义展开行
element中的table使用展开行功能，特定条件下才能点开展开行以及点击整行展开，以及使用合计不显示问题
D浩DzD的博客
07-21 4204
在使用element中的table使用展开行功能时，官网给的示例中每行都可以展开，以及只能通过点击展开图标才能展开，但是需求中是点击整行展开，以及只有某些符合条件的行才有展开功能如下图所示通过设置type=“expand”和Scopedslot可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的Scopedslot相同。...
element-ui table某些行展开某些行不展开
canyi8023的博客
02-16 1833
element ui table中，可否做到根据行数据信息来设置当前行是否有展开功能？ <el-table-column type="expand"></el-table-column> 看源码觉得这个属性不可控，求高人相助 ···回复： 最终要实现的目的是这种的，现在实现的方式是从css上解决： html <el-table :data="tableData5" style="width: 100%" :row-class-name="setClas..
el-table实现展开/收起列表功能
chunmeizhang_88的博客
06-09 3139
el-table实现展开收起功能
Vue+ElementUI中表格嵌套的使用方法
m0_66722601的博客
02-21 5612
Vue+ElementUI中表格嵌套的使用方法
el-table-column点击单元格跳转
最新发布
11-17
根据提供的两个引用，el-table-column点击单元格跳转的实现方式如下： 1. 点击单元格跳转到新页面 ```html <el-table :data="allData"> <el-table-column prop="tel" label="联系电话" align="center"> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值