elementui表格父子表_vue+element-ui实现主子表
需要实现如下效果
一般ERP中,订单数据都分为汇总信息与明细信息,然后在查询的时候一次性从后台查询多条订单json数据,并将汇总信息展示到表格中。但是明细信息也是用户需要关注的,比如用户可能会想知道某个订单里面具体包含哪些商品,下单数量分别是多少。这时候就需要能够点击具体汇总信息行数据的时候,在下方展示出对应的明细数据。
实现要点
1、主表格绑定 @expand-change 事件
2、增加展开列,并在展开列中再加一个table(作为子表)
3、methods中增加rowExpand方法具体实现
rowExpand(row, expandeRows) {
console.log('点开了' + row.orderId)
console.log(row.orderDetails)
const _this = this
_this.orderDetailData = row.orderDetails
}
完整代码如下
v-if="checkPermission(['ADMIN'])"
:ref="scope.row.orderId"
placement="top"
width="180">
确定删除本条数据吗?
取消
确
elementui表格父子表_vue+element-ui实现主子表相关推荐
- elementui上传图片加参数_Vue + Element UI使用富文本编辑器
第一步下载组件 npm install vue-quill-editor 第二步在需要使用的组件内引入· 富文本组件 import { quillEditor } from 'vue-quill-ed ...
- 修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
- element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
- vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...
- elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言 在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
- charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下 技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图 主要是配置 ...
- element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
- element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
最新文章
- 计算机应用发展方向展望,我国计算机应用现状及展望.doc
- pandas语法乱、API多?你需要整理一下!|知乎讨论
- CV之PoseEstimation:Pose Estimation人体姿态估计(AI识人,OpenPose+DeepCut+RMPE+Mask RCNN)的简介、案例应用之详细攻略
- Redis的安装以及基本操作简介
- 2020下半年新机最新消息_提前剧透 2020 年下半年五大新机
- 作者:刘新海(1976-),男,中国人民银行征信中心副研究员
- juniper srx 1500 HA及双线路自动切换配置
- sem_wait sem_post信号量操作进本函数
- 爬取两万多条租房数据,算算在广州你能「活到」第几集?
- 官方jdk历史版本的下载方式
- BiNGO的GO分析
- c语言程序设计精髓第五章编程题
- android 白色透明度,Android 透明度alpha换算表
- 网络文件共享服务(一)
- python lncrna_使用CPAT分析lncRNA
- 安卓案例:利用视图翻页器实现引导页
- 2018_2_3_Boolean Expressions_栈_模拟
- 一起学习C语言:C语言数据类型(二)
- 【id:179】【20分】C. DS二叉树--赫夫曼树的构建与编码(不含代码框架)
- ABAP编程语言-概览