element-ui多层嵌套表格数据删除
methods: {
// 原始数据
getTable () {
let arr = [{
deliveryId: 1,
deliveryNo: '8899',
deliveryDate: '1504108800000',
productIdList: [{
orderNo: '1212',
productname: '手机1',
modelNo: 'v-20',
productNum: 'v4545',
unitPrice: 2399,
productId: 11
}, {
orderNo: '1232',
productname: '手机2',
modelNo: 'v-23',
productNum: 'v4566',
unitPrice: 2299,
productId: 12
}]
}, {
deliveryId: 2,
deliveryNo: '3355',
deliveryDate: '1547469776000',
productIdList: [{
orderNo: '1222',
productname: '手机4',
modelNo: 'x-20',
productNum: 'x4545',
unitPrice: 699,
productId: 13
}, {
orderNo: '1242',
productname: '手机5',
modelNo: 'x-23',
productNum: 'x4566',
unitPrice: 899,
productId: 14
}]
}]
this.saveTable = arr
this.dealTable(arr)
}, // 表格合并方法
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
if (row.nameIndex) {
return [row.nameIndex, 1]
} else return [0, 0]
}
}, // 处理表格数据(两层数据)
// 处理需要合并表格数据
dealTable (table) {
let getDate = [] // 存储新表格数据
let typeIndex = [0] // 保存id,订单需要合并的值
table.forEach((v, index) => {
if (v.productIdList && v.productIdList.length) {
v.productIdList.forEach((subV, i, typeData) => {
if (i === typeData.length - 1) {
typeIndex.push(typeData.length) // 类型循环完成后把数据长度存起来
}
subV.deliveryId = v.deliveryId
subV.deliveryNo = v.deliveryNo
subV.deliveryDate = v.deliveryDate
getDate.push(subV)
})
}
})
let t = 0
typeIndex.forEach((v, i, typeArr) => {
if (typeArr[i + 1]) {
getDate[t].nameIndex = typeArr[i + 1]
t += typeArr[i + 1]
}
})
this.invoiceList = getDate
}, // 移除
removeOrder (row) {
// 在原始数据中删除
this.saveTable.some((item, index, arr) => {
if (item.productIdList && item.productIdList.length) {
item.productIdList.some((subItem, subIndex) => {
if (subItem.productId === row.productId) {
arr[index].productIdList.splice(subIndex, 1)
// 删除后重新处理数据
this.dealTable(arr)
return true
}
})
}
})
}
}
element-ui多层嵌套表格数据删除的更多相关文章
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- ASP.NET提取多层嵌套json数据的方法
本文实例讲述了ASP.NET利用第三方类库Newtonsoft.Json提取多层嵌套json数据的方法,具体例子如下. 假设需要提取的json字符串如下: {"name":&quo ...
- 详解ASP.NET提取多层嵌套json数据的方法
本篇文章主要介绍了ASP.NET提取多层嵌套json数据的方法,利用第三方类库Newtonsoft.Json提取多层嵌套json数据的方法,有兴趣的可以了解一下. 本文实例讲述了ASP.NET利用第三 ...
- element ui table(表格)点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- 解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找
做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...
- 提取多层嵌套Json数据
在.net 2.0中提取这样的json {"name":"lily","age":23,"addr":{"ci ...
- element ui + sortablejs实现表格的行列拖拽
<template> <div class="container"> <el-table :data="tableData" bo ...
- Gson 解析多层嵌套JSON数据
http://stackoverflow.com/questions/14139437/java-type-generic-as-argument-for-gson
随机推荐
- C# 释放资源的规范写法
static class CSharp_3 { /* ---------------------------------------- * 以下学习资源的释放:IDispose和析构函数 * 1.ID ...
- 使用word写CSDN博客文章
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- org.slf4j.impl.SimpleLoggerFactory cannot be cast to ch.qos.logback.classic.LoggerContext
查看日志信息: SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/app/a ...
- Assigning retained object to weak property object will be released after assignment
在ARC中,如果添加了weak的属性.初始化了相关的object然后给这个属性赋值的时候就会看到Xcode给出这个提示. 这个时候可以这么处理:在别的地方已经retain这个object的引用. @p ...
- C++编译器之间的不同性能
C++编译器之间的不同性能 编译器就是将“高级语言”翻译为“机器语言(低级语言)”的程序.一个现代编译器的主要工作流程:源代码 (source code) →预处理器 (preprocessor) → ...
- centos安装mysql,tomcat
软件下载: jre和jdk下载:http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javas ...
- freemarker基本入门教程
copy自http://demojava.iteye.com/blog/800204 以下内容全部是网上收集: FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主 ...
- RzToolbutton用法
- javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen
javascript 获取iframe里页面中元素值的方法 IE方法:document.frames['myFrame'].document.getElementById('test').value; ...
- [C#]合并单元格(行、列)
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...