element ui表格合并span-method

在业务中,我们有时候会遇到需要表格合并的情况,而且是需要动态的根据返回的数据内容去合并。

mergeLineMethod (){//处理合并表格数据
            this.mergeLineArr = []
            this.mergeLineIndex = 0
            let mergeLine = this.list
            mergeLine.forEach((res, i) => {
                if (i === 0) {
                    this.mergeLineArr.push(1);
                    this.mergeLineIndex= 0
                } else {
                    // 判断当前元素与上一个元素是否相同,是就给之前相同的第一个+1,并且数组添加一个0
                    if (mergeLine[i].id === mergeLine[i - 1].id) {
                        this.mergeLineArr[this.mergeLineIndex] += 1;
                        this.mergeLineArr.push(0);
                    } else {//如果与前一个不相同,则追加一个新从1开始的数字,此时更新mergeLineIndex的值
                        this.mergeLineArr.push(1);
                        this.mergeLineIndex= i;
                    }
                }
            });
        },
        mergeCell ({row,column,rowIndex,columnIndex}){
            let notColArr = [4, 5, 6, 7, 8, 12, 14]
            if (!notColArr.includes(columnIndex)) {
                const _row = this.mergeLineArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        },

这样就实现了合并

原文地址:https://www.cnblogs.com/wangxi01/p/12568077.html

时间: 2024-10-10 03:15:21

element ui表格合并span-method的相关文章

element ui 表格提交时获取所有选中的checkbox的数据

<el-table ref="multipleTable" :data="appList" @selection-change="changeFun"> <el-table-column type="selection" width="55" class="selection" prop='uuid' :selectable='checkboxInit' @select

element ui 表格在单元格上编辑

<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" class="tableEFG" style="width: 98%;margin: 0 auto;" > <el-table-column align="center" width="80" prop=&quo

vue+element UI实现分页组件

1.前言 在web页面中,常常需要将后台查询到的数据以表格形式展示出来,而这些数据量往往会非常庞大,如果将所有要展示的数据一次性请求获取并展示到页面上,那页面长度势必会变得非常的长,很不美观.更重要的是,如果数据量过于大,在页面加载时一次性请求全部数据将会耗费大量网络资源,性能极低.但是,如果我们可以将数据分页展示,这样页面首先不会变的冗长,另外只有用户点击页码才会发出请求并且每次请求的数据量也不会很大,这就极大的节省了网络资源,提高了性能.本文就以vue结合element UI实现一个数据分页

Vue框架Element UI教程(二)

原文:https://www.jianshu.com/p/1704b5935a8 [时间选择器] Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 前一篇已经安装好了Element UI环境,现在开始来实际操作框架提供的一些组件的运用了. 在准备好以下文章里面的内容

Liger UI 表格数据查找/通过条件加载数据

api上的例子是在本地过滤的,无法使用,自己摸索了一下. javascript代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 //初始化ligerui控件 $(function (){         maingrid = $("#maingrid").ligerGrid({             columns: [                 {

element ui Angular学习笔记(一)

1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入ElChildModules.ElButton 3.指令 [el-class] 如:<el-alert [el-class]="'myClass'">text</el-alert> .myClass { >div { color: #ccc; } } 在自己的@c

vue+element UI实现多级导航菜单

1.前言 在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可能是多级的,所以我们需要使用递归的方式,一层一层的递归数据,将多级菜单完整显示出来.本篇博文借助element UI组件库中的Navmenu导航菜单组件,将其进行改造后封装成一个多级导航菜单组件. 2.工作流程 组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据传

Element ui使用心得

Element ui使用心得 滑块: <template> <div class="block"> <span class="demonstration">默认</span> <el-slider v-model="value1"></el-slider> </div> <div class="block"> <span cl

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-