精华内容
下载资源
问答
  • vue实现表格合并
    2020-08-06 12:34:16

    vue实现表格合并

    javascriptvue.js

    1. 场景

    这两天一个项目,属于子需求吧,就是要做一个页面放个简单的banner下面是张大表格用来显示数据项,纯粹为了view层操作方便,就用了vue做渲染。
    然而,对方最近又提出了一个恶心需求,需要相邻的相同值的行数据项进行单元格合并,这就醉了。

    由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的。因此这个方法对所有
    数据驱动的框架都有效,比如说Angular和React。最后的实现效果是这样的:
    图片描述

    2. 思路

    原本的正常表格的代码长这样:

    <tr v-for="item in items">
        <td width="3%">{{ $index + 1 }}</td>
        <td width="15%">{{item.bsO_Name}}</td>
        <td width="8%" :class="{'overtime': overtime(item.GathDt)}">{{item.GathDt | time}}</td>
        <td width="5%">{{item.F1}}</td>
        <td width="5%">{{item.F2}}</td>
        <td width="5%">{{item.F4}}</td>
        <td width="5%">{{item.F3}}</td>
        <td width="5%">{{item.F5}}</td>
        <td width="5%">{{item.F6}}</td>
        <td width="5%">{{item.F7}}</td>
        <td width="5%">{{item.F8}}</td>
        <td width="5%">{{item.F9}}</td>
        <td width="5%">{{item.F10}}</td>
    </tr>

    先拿正常的表格来做测试,原生的<td>标签就有rowspan属性支持单元格行合并,属性值指的是向下合并多少行,其实就相当于在本行中向下又添加了几个单元格。
    因为,如果接下来的一行还会渲染的话就会被挤下去,因此,下面被合并的单元格要隐藏掉,通过display: none;css控制即可。

    因此,每个<td>标签需要带有两个属性值,rowspandisplay来控制每一个单元格的合并行数和是否显示。代码变成这样了

    <tr v-for="item in items">
        <td width="3%">{{ $index + 1 }}</td>
        <td width="10%" :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td>
        <td width="8%"  :rowspan="item.GathDtspan"   :class="{hidden: item.GathDtdis}" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
        <td width="5%"  :rowspan="item.F1span"       :class="{hidden: item.F1dis}">{{item.F1}}</td>
        <td width="5%"  :rowspan="item.F2span"       :class="{hidden: item.F2dis}">{{item.F2}}</td>
        <td width="5%"  :rowspan="item.F3span"       :class="{hidden: item.F3dis}">{{item.F3}}</td>
        <td width="5%"  :rowspan="item.F4span"       :class="{hidden: item.F4dis}">{{item.F4}}</td>
        <td width="5%"  :rowspan="item.F5span"       :class="{hidden: item.F5dis}">{{item.F5}}</td>
        <td width="10%" :rowspan="item.F6span"       :class="{hidden: item.F6dis}">{{item.F6}}</td>
        <td width="8%"  :rowspan="item.F7span"       :class="{hidden: item.F7dis}" :class="{overtime: overtime(item.F7)}">{{item.F7 | time}}</td>
        <td width="5%"  :rowspan="item.F8span"       :class="{hidden: item.F8dis}">{{item.F8}}</td>
        <td width="5%"  :rowspan="item.F9span"       :class="{hidden: item.F9dis}">{{item.F9}}</td>
        <td width="5%"  :rowspan="item.F10span"      :class="{hidden: item.F10dis}">{{item.F10}}</td>
        <td width="5%"  :rowspan="item.F11span"      :class="{hidden: item.F11dis}">{{item.F11}}</td>
    </tr>

    其中,这两个属性有一些特征:

    • 要显示的单元格rowspan为>1的值,记录接下来的行数

    • 要显示的单元格display为true

    • 接下来不显示的单元格rowspan为1且display为false

    • 只有一行数据的单元格rowspan为1且display为true

    实际上就是设计一个算法,对于输入的表格数组,每个数据项添加两个属性,rowspan和display,并且计算出**rowspan的值为
    本列中以下相同值的行数,以及依据rowspan的值计算display的值是否显示**,最后将此改变后的数组输出。

    3. show me code

    function combineCell(list) {
        for (field in list[0]) {
            var k = 0;
            while (k < list.length) {
                list[k][field + 'span'] = 1;
                list[k][field + 'dis'] = false;
                for (var i = k + 1; i <= list.length - 1; i++) {
                    if (list[k][field] == list[i][field] && list[k][field] != '') {
                        list[k][field + 'span']++;
                        list[k][field + 'dis'] = false;
                        list[i][field + 'span'] = 1;
                        list[i][field + 'dis'] = true;
                    } else {
                        break;
                    }
                }
                k = i;
            }
        }
        return list;
    }

    4. 总结

    代码实际上很短很简单,主要借助的是kmp的思想,定义一个指针k,开始指向第一个值,然后向下比较,以此对rowspan和display设置,
    若遇到不相同的值则判断为跳出,进行下一个循环,通知指针k加上这个过程中运算的行数,进行跳转,然后比较下一个单元格的值,和kmp的指针跳转判断相同字符串一样的原理。

    通过combineCell()这个函数就可以将网络请求回来的数据进行过滤,附加上相应的值后再对vue监视的数组进行赋值操作就可以了。
    实际上此方法不仅适用于vue,数据驱动的框架都可以,包括Angular和React,要想实现表格合并,对请求回来的值过滤一下就OK。

    原文链接:原文 欢迎访问本人博客:House of Cards

    更多相关内容
  • excle多表格合并

    2019-03-16 11:55:46
    Excel2016多表格合并具体操作方法。合并统一表格的不同表单。
  • 主要为大家详细介绍了Python将个excel表格合并为一个表格的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现表格合并功能

    2021-01-18 15:40:28
    本文实例为大家分享了vue实现表格合并功能的具体代码,供大家参考,具体内容如下 1、背景 本身有vue进行渲染的数据表格,,但是出于整体考虑,需要对相同的列信息进行单元格合并。 由于使用的是vue,想到MVVM是要用...
  • 本文实例为大家分享了vue element实现表格合并行数据的具体代码,供大家参考,具体内容如下 支持不分页的表格数据,分页的表格数据还有小bug xss=removed span-method=objectSpanMethod> 序号 prop=id ...
  • 老师收到很表格,由于表格的项目很,手动复制合并很麻烦,通过表格合并工具,将众多表格的内容,合并到一个表格中去。合并后,表格的格式不变。此工具使用python代码编写,用户可以直接使用,或者自我完善其功能...
  • PQ合并表格完整例子.zip
  • 今天跟大家分享一下excel多表格合并怎么快速完成? 1.打开演示文件要求将这两个工作表合并到一起 2.首先我们点击如下图选项 3.点击【汇总拆分】 4.选择【合并多表】 5.设置表头...

    今天跟大家分享一下excel多表格合并怎么快速完成?

    1.打开演示文件要求将这两个工作表合并到一起

    2.首先我们点击如下图选项

    3.点击【汇总拆分】

    4.选择【合并多表】

    5.设置表头行数为1

    6.最后点击【确定】即可

    7.完成效果如下图

    展开全文
  • 现实中会遇到很需求,合并列,例如要显示一个名学生的各门课程成绩。 html实现 使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下: 姓名 课程数 课程名称 成绩 张三 ...
  • 主要为大家详细介绍了vue通过数据过滤实现表格合并,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 办公的时候想要合并多个Excel表格,一个个来拷贝粘贴,如果文件很多就要花很多时间,前面试了很多种方法,先用office和Python,感觉还是有点麻烦,后面自己写了shell脚本。
  • 官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,rowIndex,columnIndex是当前行和列的...
  • 易语言高级表格合并列相同内容源码
  • 如何快速把个excel表格合并成一个excel表呢?首先,我们需要把个excel表都放在同一个文件夹里面,并在这个文件夹里面新建一个excel文件。用microsoft excel打开新建的excel表,并右键单击sheet1,或者按ALT+F11...

    如何快速把多个excel表格合并成一个excel表呢?

    首先,我们需要把多个excel表都放在同一个文件夹里面,并在这个文件夹里面新建一个excel文件。

    a1367d46deec600395f8a5cc842995b1.png

    用microsoft excel打开新建的excel表,并右键单击sheet1,或者按ALT+F11,找到“查看代码”,单击进去。进去之后就看到了宏计算界面。

    ababbc5c51db3435e54a6c3545229c0b.png

    然后我们把下面这些宏计算的代码复制进去,然后找到工具栏上面的“运行”下的“运行子过程/用户窗体”,代码如下,如图所示:

    Sub 合并当前目录下所有工作簿的全部工作表()

    Dim MyPath, MyName, AWbName

    Dim Wb As Workbook, WbN As String

    Dim G As Long

    Dim Num As Long

    Dim BOX As String

    Application.ScreenUpdating = False

    MyPath = ActiveWorkbook.Path

    MyName = Dir(MyPath & "\" & "*.xls")

    AWbName = ActiveWorkbook.Name

    Num = 0

    Do While MyName ""

    If MyName AWbName Then

    Set Wb = Workbooks.Open(MyPath & "\" & MyName)

    Num = Num + 1

    With Workbooks(1).ActiveSheet

    .Cells(.Range("B65536").End(xlUp).Row + 2, 1) = Left(MyName, Len(MyName) - 4)

    For G = 1 To Sheets.Count

    Wb.Sheets(G).UsedRange.Copy .Cells(.Range("B65536").End(xlUp).Row + 1, 1)

    Next

    WbN = WbN & Chr(13) & Wb.Name

    Wb.Close False

    End With

    End If

    MyName = Dir

    Loop

    Range("B1").Select

    Application.ScreenUpdating = True

    MsgBox "共合并了" & Num & "个工作薄下的全部工作表。如下:" & Chr(13) & WbN, vbInformation, "提示"

    End Sub

    819f9165ffb39e0a5c9f9fec65dc40b7.png

    点击运行,等待一会合并表格就完成了。

    af343a22c279398b10bce7a677da8194.png

    需要说明的是:B65536这个数值可以修改增加,根据内容多少,修改参数

    对使用WPS的用户,可以选择WPS专业版,普通版没有VBA程序。

    展开全文
  • npoi实现excel中表格数据分别合并,excel数据导入导出,项目源码
  • 对excel文件及表格进行合并、查分、汇总等操作
  • 将一个文件夹中的excel表格合并成我们想要的形式,主要要pandas中的concat()函数 思路 用os库将所需要处理的表格放到同一个列表中,然后遍历列表,依次把所有文件纵向连接起来。 最开始的第一种思路是先拿一个文件...
  • 基于nodejs的excel表格合并工具 安装或升级 该工具是Nodejs命令行工具,安装方式如下(需全局安装) npm install -g excelmergetool 查看版本 excelmergetool --version 查看帮助 excelmergetool --help 卸载 npm ...
  • 主要介绍了elementUI table表格动态合并的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 百思表格合并是一款可以批量合并在同一个文件夹下的所有Excel表格的软件(支持子文件夹),支持.xls和.xlsx两种类型的表格合并。软件主要功能为按行合并和按列合并。按行合并:1.合并
  • 之前写了一些关于element-ui表格合并的方法,不过用的数据都是确定的数据(死数据),但是很时候我们的数据都是通过后台获得的,数据不稳定,这个时候使用表格合并就需要先处理一下数据,先看一下一种很常见的数据展示...
  • bootstrap表格合并

    2017-10-17 12:23:56
    bootstrap表格合并,将要合并的单元格每四列进行合并
  • 百思表格合并是一款非常好用的Excel表格合并软件,可以批量合并在同一个文件夹下的所有Excel表格的软件(支持子文件夹),支持.xls和.xlsx两种类型的表格合并。 百思表格合并软件功能介绍: 软件主要功能为按行合并...
  • 今天小编就为大家分享一篇layui数据表格跨行自动合并的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 好用的EXCEL文件合并的小程序,打开软件,选择excel文件,就可以自动合并
  • 本篇介绍,把个excel表分别写到一个表格对应的个sheet里面,每个表的名称就是sheet的名字 import os import pandas as pd dir = './table_dir' # 获取目录下所有的表 origin_file_list = os.listdir(dir) print...

    本篇介绍,把多个excel表分别写到一个表格对应的多个sheet里面,每个表的名称就是sheet的名字

    第一种方法:用pandas

    import os
    import pandas as pd
    
    dir = './table_dir'
    # 获取目录下所有的表
    origin_file_list = os.listdir(dir)
    print(origin_file_list)
    
    with pd.ExcelWriter('result.xls') as writer:
    	# 循环遍历表格
        for i in origin_file_list:
            # 拼接每个文件的路径
            file_path = dir + '/' + i
            # 把表名赋予给对应的sheet
            sheet_name = i[:-4]
            df = pd.read_excel(file_path)
    
    		#变相解决表格中第一行第一列为空的缺陷
            string = "".join(list(str(i) for i in df.index))
            # 判断如果索引都为数字,则不保留索引(根据自己代码调整)
            if string.isdigit():
                df.to_excel(writer, sheet_name,index=False)
            else:
                df.to_excel(writer, sheet_name)
    
    

    第二种方法:用openpyxl

    import os
    import openpyxl
    
    dir = './table_dir'
    # 获取目录下所有的表
    origin_file_list = os.listdir(dir)
    
    wb2 = openpyxl.Workbook()
    for file in origin_file_list:
    	file_path = dir + '/' + file 
        sheet_name = file.split('/')[-1].split('.')[0]
        print(sheet_name)
        old_wb = openpyxl.load_workbook(file_path )
        old_sheet_name = old_wb.get_sheet_names()[0]
        old_ws = old_wb[old_sheet_name]
        ws2 = wb2.create_sheet(sheet_name)
        for row in old_ws.values:
            ws2.append(row)
    wb2.save('result.xls')
    

    例如图:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 表格合并单元格 参考示例:合并单元格 调用方法:margeCells。如下代码: 代码如下: grid.on(“load”, onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 142,973
精华内容 57,189
关键字:

怎么多表格合并