elementUI table表格合并相同的内容
elementUI table表格合并相同的内容
1.表格和数据
表格是这样
数据(由于数据太多,只展示了几个)
tableData: [{one: '1 . 产出指标',two: '1 .1 数量指标',three: '1.1.1打造技术技能人才培养高地',four: '1.1.1.1.SCI系统化人才培养体系',target: '1个',realize: '1个',reach: 1,material: 2},{one: '1 . 产出指标',two: '1 .1 数量指标',three: '1.1.1打造技术技能人才培养高地',four: '1.1.1.2.校内实训基地建设',target: '15个',realize: '15个',reach: 1,material: 1},{one: '1 . 产出指标',two: '1 .1 数量指标',three: '1.1.1打造技术技能人才培养高地',four: '1.1.1.3职业教育本科试点专业',target: '10个',realize: '8',reach: 2,material: 1}]
2.合并相同的表格
flitterData(arr) {const spanOneArr = [];const spanTwoArr = [];const spanThreeArr = [];let concatOne = 0;let concatTwo = 0;let concatThree = 0;arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1);spanTwoArr.push(1);spanThreeArr.push(1);} else {if (item.one === arr[index - 1].one) {// 第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);concatOne = index;}if (item.three === arr[index - 1].three && item.one === arr[index - 1].one) {// 第二列需合并相同内容的判断条件spanTwoArr[concatTwo] += 1;spanTwoArr.push(0);} else {spanTwoArr.push(1);concatTwo = index;}if (item.one === arr[index - 1].one && item.two === arr[index - 1].two) {// 第三列需合并相同内容的判断条件spanThreeArr[concatThree] += 1;spanThreeArr.push(0);} else {spanThreeArr.push(1);concatThree = index;}}});return {one: spanOneArr,two: spanTwoArr,three: spanThreeArr};},objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.flitterData(this.tableData).one[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}if (columnIndex === 2) {const _row = this.flitterData(this.tableData).two[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}if (columnIndex === 1) {const _row = this.flitterData(this.tableData).three[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}}
elementUI table表格合并相同的内容相关推荐
- 2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
- element-ui table表格 增加合计行 和 表格列固定之后 滚动条无法滚动
element-ui table表格 增加合计行 和 表格列固定之后 滚动条无法滚动 是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
- element table表格合并行和列
element-ui 官网案例: table合并行或列 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当前行号row ...
- table 表格合并
table 表格合并 开发工具与关键技术:DW.JavaScript 作者:刘东标 撰写时间:2019-03-14 <div ><div><span>colspan ...
- Vue+ElementUI table表格分页
Vue+ElementUI table表格分页 分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
- elementui table 表格固定列最后一行显示不全
elementui table 表格固定列最后一行显示不全 这种情况有时在宽度刚好处于临界值状态时会出现.因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮 ...
- 修改elementui的表格合并行和表格表头边框
前言 修改elementui的表格合并行和表格表头边框需要注意的地方 一.为什么有时候修改了样式却没有生效? 当我们在修改elementui的样式的时候发现样式不生效的时候,需要查看是否给需要的元素添 ...
- elementui table表格跨分页多选
elementui table表格跨分页多选 项目中遇到的表格多选加分页,要获取选中的数据,使用elementui的表格开发,刚开始思路是: 1.创建一个数组,使它每项为一页所选择的选择项数据数组.选 ...
- element-ui table 表格内出现一根横线
element-ui table 表格内出现一根横线 element-ui table表格组件 , 在使用固定左侧列的时候 , 而且只有在数据只有一行的时候 , 经常会出现 这种情况 , 底部出现一根 ...
最新文章
- python基础题-Python基础30道测试题(字符串相关)
- 位运算与组合搜索(二)
- 牛客网_PAT乙级_1010月饼 (25)
- unityios开发--加载视频以及加载完成之后自动跳转 .
- php 比java 快_php比java要快在哪里
- 蔡高厅老师 - 高等数学阅读笔记 - 06 - 高阶导数 隐函数- 02 (28、29、30、31)
- Mapgis与Arcgis数据互转中出现的问题
- oracle:oracle学习笔记(三)
- php 封装一个sdk,PHP 之微信JSSDK类封装
- Trick 一题多解——交换两个数(swap)
- 在vs编辑器里走来走去的快捷键
- linux 安装k8s
- win7安装Android Studio
- 秀米html编辑器,ueditor集成秀米编辑器
- AN学习笔记,代码访问影片剪辑内部的子影片剪辑
- 稀土配合物Ln(DBM)3(Cz-PBM)|Tb(DBM)3(Cz-PBM)|Gd(DBM)3(Cz-PBM)|Ir(L)2(DBM-Ox)Ir(L)2(DBM-Cz)qiyue
- 无穷小带来什微积分么大礼包
- ssh-keygen -t rsa -C xxxx@xxxx.com解释
- MFC -- ShowWindow(int nCmdShow)参数总结
- Seq2Seq模型讲解
热门文章
- 正确的打字方式,如何正确分配手指控制按键
- Quartz.NET总结(五)基于Quartz.net 的开源任务管理平台
- python医院体检预约系统django548
- WCF医院管理系统技术解析(十)体检报告结果打印(水晶报表)
- 怎样用比较器实现信号的衰减和饱和_水下技术 无人水下航行器在水电站隧洞检查中的应用探讨...
- 用Python在喜马拉雅音乐爬虫小试
- Java知识点串讲之面向对象简述
- Vue中updated和watch的区别
- 数据分析:大数据时代的必备技能之Power BI
- 一款黑苹果系统引导工具,系统来解Clover带来的限制和问题