element 动态合并表格---进阶版
错误展示
正确展示
如果使用上次博客写的element 动态合并表格那么会出现上述图片情况,所以对其进行完善实现下图(正确展示)情况
处理函数
mergeTableRow(data, merge) {
if (!merge || merge.length === 0) {
return data;
}
merge.forEach((m) => {
const mList = {};
let spliceLocation = merge.indexOf(m)
data = data.map((v, index) => {
const rowVal = v[m];
if (mList[rowVal] && mList[rowVal].newIndex === index) {
// flag为true的时候代表当前值的前者与上一个值相等
/*
只有当当前merge之前的所有merge的值的当前index等于index-1 才允许当前merge合并
*/
let flag = false;
let mergeSolve = merge.slice(0,spliceLocation);
mergeSolve.slice(0,spliceLocation).forEach(mergeItem=>{
if(data[index][mergeItem] == data[index-1][mergeItem]){
flag = true
}
})
if( m == merge[0] ){
flag = true;
}
if(flag){
mList[rowVal]["num"]++;
mList[rowVal]["newIndex"]++;
data[mList[rowVal]["index"]][m + "-span"].rowspan++;
v[m + "-span"] = {
rowspan: 0,
colspan: 0,
};
}else{
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1,
};
v[m + "-span"] = {
rowspan: 1,
colspan: 1,
};
}
} else {
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1,
};
v[m + "-span"] = {
rowspan: 1,
colspan: 1,
};
}
return v;
});
});
return data;
},
数据处理
let dataSolve = this.mergeTableRow(res.data.data, ["feature", "state"]);
elementUI表格配置项
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column["property"] + "-span";
if (row[span]) {
return row[span];
}
},
实际案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div id="app">
<el-table style="width:840px" :data="historyData" :span-method="objectSpanMethod" :border="true">
<el-table-column prop="feature" label="Feature" align="center" width="140">
</el-table-column>
<el-table-column prop="state" label="状态" align="center" width="140">
</el-table-column>
<el-table-column prop="type" label="任务类型" align="center" width="140">
</el-table-column>
<el-table-column prop="owner" label="负责人" align="center" width="140">
</el-table-column>
</el-table>
</div>
<body>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
historyData: [],
}
},
mounted() {
let dataArr = [
{
"feature": "Change",
"state": "已完成",
"type": "机翼",
"owner": "小王",
"week10Plan": "1.0",
"week10Book": "1.0",
"week11Plan": "0.0",
"week11Book": "0.0",
"week12Plan": "0.0",
"week12Book": "0.0"
},
{
"feature": "Change",
"state": "已完成",
"type": "尾部",
"owner": "小王",
"week10Plan": "1.0",
"week10Book": "1.0",
"week11Plan": "0.0",
"week11Book": "0.0",
"week12Plan": "0.0",
"week12Book": "0.0"
},
{
"feature": "Perfor",
"state": "已完成",
"type": "头部",
"owner": "小王",
"week10Plan": "1.0",
"week10Book": "1.0",
"week11Plan": "0.0",
"week11Book": "0.0",
"week12Plan": "0.0",
"week12Book": "0.0"
},
{
"feature": "Power",
"state": "未完成",
"type": "翅膀",
"owner": "小王",
"week10Plan": "0.0",
"week10Book": "0.0",
"week11Plan": "1.0",
"week11Book": "0.0",
"week12Plan": "5.0",
"week12Book": "5.0"
},
{
"feature": "Touch",
"state": "已完成",
"type": "机舱仪器",
"owner": "小王",
"week10Plan": "1.0",
"week10Book": "1.0",
"week11Plan": "0.0",
"week11Book": "0.0",
"week12Plan": "0.0",
"week12Book": "0.0"
}
]
let dataSolve = this.mergeTableRow(dataArr, ["feature", "state"]);
this.historyData = dataSolve;
},
methods: {
// 合并表格
mergeTableRow(data, merge) {
if (!merge || merge.length === 0) {
return data;
}
merge.forEach((m) => {
const mList = {};
let spliceLocation = merge.indexOf(m)
data = data.map((v, index) => {
const rowVal = v[m];
if (mList[rowVal] && mList[rowVal].newIndex === index) {
// flag为true的时候代表当前值的前者与上一个值相等
/*
只有当当前merge之前的所有merge的值的当前index等于index-1 才允许当前merge合并
*/
let flag = false;
let mergeSolve = merge.slice(0, spliceLocation);
mergeSolve.slice(0, spliceLocation).forEach(mergeItem => {
if (data[index][mergeItem] == data[index - 1][mergeItem]) {
flag = true
}
})
if (m == merge[0]) {
flag = true;
}
if (flag) {
mList[rowVal]["num"]++;
mList[rowVal]["newIndex"]++;
data[mList[rowVal]["index"]][m + "-span"].rowspan++;
v[m + "-span"] = {
rowspan: 0,
colspan: 0,
};
} else {
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1,
};
v[m + "-span"] = {
rowspan: 1,
colspan: 1,
};
}
} else {
mList[rowVal] = {
num: 1,
index: index,
newIndex: index + 1,
};
v[m + "-span"] = {
rowspan: 1,
colspan: 1,
};
}
return v;
});
});
return data;
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const span = column["property"] + "-span";
if (row[span]) {
return row[span];
}
},
}
})
</script>
</body>
</html>
element 动态合并表格---进阶版的更多相关文章
- element 动态合并表格
前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单 ...
- jquery动态合并表格行
利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...
- arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版
我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...
- javascript动态合并表格相同的单元格
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- 实操记录之-----Ant Design of Vue 增强版动态合并单元格，自动根据数据进行合并，可自定义横纵向合并
前几天搞了个简易版的动态合并单元格 但是需求有变化,就只能稍微改改了~~ 欢迎路过的各位大佬指出我代码的问题~~~~ 另: 代码执行效率不是很高,如果需要大量渲染更多数据建议可以直接使用原生 < ...
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
- NG-ZORRO + angular-cli11 表格横纵向单元格合并，按需设置背景色，解决动态合并单元格动态colspan情况下，nzLeft固定列失效问题，也适用VUE,REACT
NG-ZORRO + angular-cli11 实现表格横纵向单元格合并,按需设置背景色,并解决动态合并单元格动态colspan情况下,nzLeft固定列失效问题 HTML代码 <!-- 1. ...
- Bootstrap-table实现动态合并相同行(表格同名合并)
写在前面: 有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成 ...
- vue+element创建动态的form表单.以及动态生成表格的行和列
动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...
- element ui的表格列设置fixed后做动态表格出现表格错乱
最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...
随机推荐
- Honor X20 忽然不能与Android Studio 连接
背景:前一天还正常使用,可以连接Android Studio,第二天就连不上了 已知:数据线没问题,驱动没问题,设备开了开发者模式,连接上电脑时会提示已连接USB调试, 测试过程:(点击撤销USB调试 ...
- 在一个简单的pwn题目中探究执行系统调用前堆栈的对齐问题
题目介绍:在输入AAAAAAAAAAAAAAAAAAAAAAAAA后,程序会打开一个shell,这是为什么?字符串中的A能否更换为@? 1.程序接收输入AAAAAAAAAAAAAAAAAAAAAAAA ...
- 语音识别 可以跑在MCU上吗
Ref: https://developer.arm.com/Additional%20Resources/Video%20Tutorials/AITechTalk-Video-Speech%20re ...
- springCloud allibaba 微服务引言
微服务篇: springcloud 常见组件有哪些 nacos 的服务注册表结构是怎样的 nacos 如何支撑阿里内部数十万服务注册压力 nacos 如何避免并发读写冲突问题 nacos 和eurek ...
- Playwright 源码 BrowserType
playwright-java 的 Browser.BrowserContext.Page 挺好理解的,唯独这厮,就有一丢丢 -- package com.microsoft.playwright; ...
- Time Zone, Leap Year, Date Format, Epoch Time 时区, 闰年, 日期格式
前言 以前有写过一篇了, 但很乱, 这篇就作为它的整理版吧. Leap Year 闰年 闰年是指那些有 366 天, 二月份有 29号 的年份. 比如 2020年 有 2月29日, 所以 2020 就 ...
- reinstall nodejs 后跑不到 command
现象 : node -v 可以跑 , ng new 这些就跑不到 (确保已经安装了 global cli) 那多半是 path 的问题 https://stackoverflow.com/questi ...
- Servlet——执行流程、生命周期、方法介绍、体系结构
执行流程 生命周期 对象的生命周期是指一个对象从被创建到被销毁的整个过程 Servlet运行在Servlet容器(web服务器)中,其生命周期由容器管理,分为四个阶段: 1. 加载和实例 ...
- Maya 2019.2 Mtoa 无法正常加载并报错
事件起因: 在开始安装 Maya2019.2 时自动安装的 Mtoa 的版本为 5.3.1,但是在插件管理器里无法启用插件,于是乎去网上下了一个低的版本 5.1.1,虽然可以使用但是渲染出来的东西不能 ...
- 智慧矿山IT智能运维自动化解决方案
矿山企业是国民经济中的重要组成部分,其资源开发和产业链条中涉及的环节与过程非常繁琐和复杂.随着我国矿山企业规模逐年扩大,为了提高其生产效率和降低其生产成本,信息化.数字化建设成为当下矿山企业发展的重要 ...