LAY-EXCEL导出excel并实现单元格合并

已于 2024-03-24 21:24:49 修改
阅读量2.5k 收藏 12
点赞数 8
分类专栏： Vue.js 文章标签： excel 前端 vue.js javascript
于 2023-03-08 10:42:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiciqiang/article/details/129392965
版权

通过lay-excel插件实现Excel导出，并实现单元格合并，样式设置等功能。

更详细描述，请去lay-excel插件文档查看，地址：快速上手 · LAY-EXCEL 插件文档

一、安装

这里使用Vue前端框架来演示Excel导出功能，可通过npm进行安装，代码如下：


$ npm i lay-excel

二、相关函数

以下只是将这次演示demo中会使用到函数及相关参数进行列举，如果需更深入了解或更复杂功能实现，可去lay-excel的插件文档中查看。

2.1 exportExcel参数配置

用于将 data 数据依次导出，如果需要调整导出后的文件字段顺序或者过滤多余数据，可使用filterExportData()来梳理。另个导出每行数据对应key数量必须一致，否则会出现错位现象。

参数配置：

参数名称

描述

默认值

data

数据列表（需指定表名）

必填

filename

文件名称（带后缀）

必填

type

导出类型，支持 xlsx、csv、ods、xlsb、fods、biff2

xlsx

options

其他可选配置

null

options支持参数：

参数名称

描述

默认值

Props

配置文档基础属性，支持Title、Subject、Author、Manager、Company、Category、Keywords、Comments、LastAuthor、CreatedData

null

extend

表格配置参数，支持 !merge (合并单元格信息)、!cols(行数)、!protect(写保护)等，原生配置请参考，其中 !merge 配置支持辅助方法生成，详见 makeMergeConfig(origin)！

null

compression

是否压缩，压缩效果比较明显，建议开启（9列9w行有较多重复的数据，从 30M 缩小到 3M）

true

writeOpt

写入函数的可选项覆盖，一般用默认生成的配置即可，具体请查看 Writing Options

undefined

2.2 filterExportData参数配置

辅助方法，梳理导出的数据，包括字段排序和多余数据过滤。

参数名称

描述

默认值

data

需要梳理的数据

必填

fields

支持数组、对象和回调函数，用于映射关系和字段排序

必填

单元格属性含义：

键名称

描述

v

单元格的值

w

格式化文本（如果适用）

t

单元格类型: b 布尔值, n 数字, e 错误, s 字符, d 日期

f

单元格公式（如果适用）

r

富文本编码（如果适用）

h

富文本的HTML呈现（如果适用）

c

与单元格相关的注释

z

与单元格关联的数字格式字符串（如果需要）

l

单元格超链接对象（目标链接，.tooltip是提示）

s

单元格的样式/主题（如果适用）

样式设置对应参数，可去lay-excel插件文档中查看，地址：样式设置专区 · LAY-EXCEL 插件文档

2.3 makeColConfig参数配置

辅助方法：用于生成合并表格的配置项，注意需要传入到 exportExcel 的 opt.extend['!merge'] 中。

参数名称

描述

默认值

origin

二维数组

undefined

2.4 makeMergeConfig参数配置

辅助方法：生成列宽配置，返回结果需放置于opt.extend['!cols']中。

参数名称

描述

默认值

data

一个对象，对象的key代表列（如：ABCDE），value代表宽度

null

defaultNum

渲染过程中未指定单元格的默认宽度

60

三、Demo实现

通过lay-excel来实现如下图格局，是非常方便的，只需要传入相应参数即可。

3.1 创建模板页

首先，在src中创建永动默认首页，在页面中添加导出按钮，代码如下：


<template>
    <div class="main-box">
        <el-button size="small" type="primary" @click="exportEvent">导出表格</el-button>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                
            }
        },
        methods: {
            //导出事件
            exportEvent(){}
        }
    }
</script>

页面效果如下：

3.2 绘制表格框架

如上图示例，将合并单元格二维数据，放到makeMergeConfig函数中即可，这里合并单元格是从左上角往右边或下面 进行合并的，代码如下：


exportEvent(){
    //合并参数
    let mergeConf = LAY_EXCEL.makeMergeConfig([
        ['A1', 'I1'],
        ['A2', 'A3'],
        ['F2', 'F3'],
        ['G2', 'G3'],
        ['B2', 'E2'],
        ['H2', 'I2']
    ]);
    
    //导出数据
    LAY_EXCEL.exportExcel([], '导出测试.xlsx', 'xlsx', {
        extend: {
            '!merges': mergeConf,
        }
    });
}

此时点击导出，则可以导出合并后的表格框架。

3.3 导出数据

这里先导出数据，再实现标题数据导出，先将表格对应列和数据中字段关联上。代码如下：


exportEvent(){
    var data = [
        {
            name: "李四", 
            age: 72, 
            gender: 1, 
            high: 164, 
            weight: 80, 
            mobile: 15627070182, 
            email: "test15627070182@qq.com", 
            province: "湖北省", 
            city: "长沙市"
        },
        {
            name: "张三", 
            age: 60, 
            gender: 1, 
            high: 161, 
            weight: 75, 
            mobile: 15621397301, 
            email: "test15621397301@qq.com", 
            province: "浙江省", 
            city: "台州市"
        },
        {
            name: "王五", 
            age: 82, 
            gender: 1, 
            high: 170, 
            weight: 72, 
            mobile: 15684572039, 
            email: "test15684572039@qq.com", 
            province: "安徽省", 
            city: "六安市"
        },
        {
            name: "赵六", 
            age: 56, 
            gender: 2, 
            high: 166, 
            weight: 50, 
            mobile: 15694331283, 
            email: "test15694331283@qq.com", 
            province: "江苏省", 
            city: "苏州市"
        }
    ], exportData = [];
    
    
    //先将标题前三行空出来
    exportData.push.apply(exportData, [{}, {}, {}]);
    //追加员工数据
    exportData.push.apply(exportData, data);
    
    //合并参数
    let mergeConf = LAY_EXCEL.makeMergeConfig([
        ['A1', 'I1'],
        ['A2', 'A3'],
        ['F2', 'F3'],
        ['G2', 'G3'],
        ['B2', 'E2'],
        ['H2', 'I2']
    ]);
    
    //导出数据
    LAY_EXCEL.exportExcel(exportData, '导出测试.xlsx', 'xlsx', {
        extend: {
            '!merges': mergeConf,
        }
    });
}

此时点击导出，则可看到每列对应数据了，如下图：

3.4 添加样式

咱们先定义commonStyle公共样式属性，再定义getCellStyle()函数，用来返回所有对应字段的样式。然后通过lay-excel的filterExportData()辅助函数，来梳理导出的数据，包括字段排序和多余数据过滤。代码如下：


exportEvent(){
    var data = [
        {
            name: "李四", 
            age: 72, 
            gender: 1, 
            high: 164, 
            weight: 80, 
            mobile: 15627070182, 
            email: "test15627070182@qq.com", 
            province: "湖北省", 
            city: "长沙市"
        },
        {
            name: "张三", 
            age: 60, 
            gender: 1, 
            high: 161, 
            weight: 75, 
            mobile: 15621397301, 
            email: "test15621397301@qq.com", 
            province: "浙江省", 
            city: "台州市"
        },
        {
            name: "王五", 
            age: 82, 
            gender: 1, 
            high: 170, 
            weight: 72, 
            mobile: 15684572039, 
            email: "test15684572039@qq.com", 
            province: "安徽省", 
            city: "六安市"
        },
        {
            name: "赵六", 
            age: 56, 
            gender: 2, 
            high: 166, 
            weight: 50, 
            mobile: 15694331283, 
            email: "test15694331283@qq.com", 
            province: "江苏省", 
            city: "苏州市"
        }
    ], 
        //公共样式
        commonStyle = {
            font: {    sz: 12 },
            alignment: {
                vertical: "center",
                horizontal: "center"
            },
            border: {
                top: {style: 'thin', color: {rgb: '666666'}},
                bottom: {style: 'thin', color: {rgb: '666666'}},
                left: {style: 'thin', color: {rgb: '666666'}},
                right: {style: 'thin', color: {rgb: '666666'}}
            }
        },
        exportData = [];
    
    function getCellStyle(styleParam){
        let tmpData = {};
        ['name', 'age', 'gender', 'high', 'weight', 'mobile', 'email', 'province', 'city'].forEach(item => {
            tmpData[item] = function(value, line, data){
                return {
                    v: value,
                    s: {
                        ...commonStyle
                    }
                }
            }
        });
        return tmpData;
    }
    
    //梳理数据
    let dataList = LAY_EXCEL.filterExportData(data, getCellStyle());
    
    //先将标题前三行空出来
    exportData.push.apply(exportData, [{}, {}, {}]);
    //追加员工数据
    exportData.push.apply(exportData, dataList);
    
    //合并参数
    let mergeConf = LAY_EXCEL.makeMergeConfig([
        ['A1', 'I1'],
        ['A2', 'A3'],
        ['F2', 'F3'],
        ['G2', 'G3'],
        ['B2', 'E2'],
        ['H2', 'I2']
    ]);
    
    //导出数据
    LAY_EXCEL.exportExcel(exportData, '导出测试.xlsx', 'xlsx', {
        extend: {
            '!merges': mergeConf,
        }
    });
}

此时点击导出，则可看到填充数据位置字体居中，并有线框，如下图：

如上图会发现，手机号和邮箱地址的宽度不够，这个简单，使用lay-excel的makeColConfig()辅助函数来调整列宽即可。代码如下：


exportEvent(){
    var data = [
        {
            name: "李四", 
            age: 72, 
            gender: 1, 
            high: 164, 
            weight: 80, 
            mobile: 15627070182, 
            email: "test15627070182@qq.com", 
            province: "湖北省", 
            city: "长沙市"
        },
        {
            name: "张三", 
            age: 60, 
            gender: 1, 
            high: 161, 
            weight: 75, 
            mobile: 15621397301, 
            email: "test15621397301@qq.com", 
            province: "浙江省", 
            city: "台州市"
        },
        {
            name: "王五", 
            age: 82, 
            gender: 1, 
            high: 170, 
            weight: 72, 
            mobile: 15684572039, 
            email: "test15684572039@qq.com", 
            province: "安徽省", 
            city: "六安市"
        },
        {
            name: "赵六", 
            age: 56, 
            gender: 2, 
            high: 166, 
            weight: 50, 
            mobile: 15694331283, 
            email: "test15694331283@qq.com", 
            province: "江苏省", 
            city: "苏州市"
        }
    ], 
        //公共样式
        commonStyle = {
            font: {    sz: 12 },
            alignment: {
                vertical: "center",
                horizontal: "center"
            },
            border: {
                top: {style: 'thin', color: {rgb: '666666'}},
                bottom: {style: 'thin', color: {rgb: '666666'}},
                left: {style: 'thin', color: {rgb: '666666'}},
                right: {style: 'thin', color: {rgb: '666666'}}
            }
        },
        exportData = [];
    
    function getCellStyle(styleParam){
        let tmpData = {};
        ['name', 'age', 'gender', 'high', 'weight', 'mobile', 'email', 'province', 'city'].forEach(item => {
            tmpData[item] = function(value, line, data){
                return {
                    v: value,
                    s: {
                        ...commonStyle
                    }
                }
            }
        });
        return tmpData;
    }
    
    //梳理数据
    let dataList = LAY_EXCEL.filterExportData(data, getCellStyle());
    
    //先将标题前三行空出来
    exportData.push.apply(exportData, [{}, {}, {}]);
    //追加员工数据
    exportData.push.apply(exportData, dataList);
    
    //合并参数
    let mergeConf = LAY_EXCEL.makeMergeConfig([
        ['A1', 'I1'],
        ['A2', 'A3'],
        ['F2', 'F3'],
        ['G2', 'G3'],
        ['B2', 'E2'],
        ['H2', 'I2']
    ]);
    //配置列宽
    let colConf = LAY_EXCEL.makeColConfig({
        F: 100,
        G: 150
    });
    
    //导出数据
    LAY_EXCEL.exportExcel(exportData, '导出测试.xlsx', 'xlsx', {
        extend: {
            '!merges': mergeConf,
            '!cols': colConf
        }
    });
}

将列F和列G分别设置为100px，150px，此时点击导出表格则非常美观了，效果图下：

3.5 填充标题数据

通过上面数据的渲染后，大家应该了解了表格中每列所对应的JSON数据中的字段了，所以定义标题是，将对应位置数据放到对应字段上即可。因为合并时，是自上往下，自左往右进行合并，除开始位置单元格数据，后面单元格会被覆盖，所以这里姓名，手机号，邮箱需放在第列行数据中。代码如下：


exportEvent(){
    var titles = [
            {
                name: "员工信息统计表"
            },
            {
                name: "姓名", 
                age: "基本信息", 
                mobile: "手机号", 
                email: "邮箱", 
                province: "地址信息"
            },
            {
                age: "年龄", 
                gender: "性别", 
                high: "身高", 
                weight: "体重", 
                province: "所在省", 
                city: "所在市"
            }
        ], 
        data = [
        {
            name: "李四", 
            age: 72, 
            gender: 1, 
            high: 164, 
            weight: 80, 
            mobile: 15627070182, 
            email: "test15627070182@qq.com", 
            province: "湖北省", 
            city: "长沙市"
        },
        {
            name: "张三", 
            age: 60, 
            gender: 1, 
            high: 161, 
            weight: 75, 
            mobile: 15621397301, 
            email: "test15621397301@qq.com", 
            province: "浙江省", 
            city: "台州市"
        },
        {
            name: "王五", 
            age: 82, 
            gender: 1, 
            high: 170, 
            weight: 72, 
            mobile: 15684572039, 
            email: "test15684572039@qq.com", 
            province: "安徽省", 
            city: "六安市"
        },
        {
            name: "赵六", 
            age: 56, 
            gender: 2, 
            high: 166, 
            weight: 50, 
            mobile: 15694331283, 
            email: "test15694331283@qq.com", 
            province: "江苏省", 
            city: "苏州市"
        }
    ], 
        //公共样式
        commonStyle = {
            font: {    sz: 12 },
            alignment: {
                vertical: "center",
                horizontal: "center"
            },
            border: {
                top: {style: 'thin', color: {rgb: '666666'}},
                bottom: {style: 'thin', color: {rgb: '666666'}},
                left: {style: 'thin', color: {rgb: '666666'}},
                right: {style: 'thin', color: {rgb: '666666'}}
            }
        },
        exportData = [];
    
    function getCellStyle(styleParam){
        let tmpData = {};
        ['name', 'age', 'gender', 'high', 'weight', 'mobile', 'email', 'province', 'city'].forEach(item => {
            tmpData[item] = function(value, line, data){
                return {
                    v: value,
                    s: {
                        ...commonStyle
                    }
                }
            }
        });
        return tmpData;
    }
    
    //梳理数据
    let titleList = LAY_EXCEL.filterExportData(titles, getCellStyle());
    //梳理数据
    let dataList = LAY_EXCEL.filterExportData(data, getCellStyle());
    
    //先将标题前三行空出来
    exportData.push.apply(exportData, titleList);
    //追加员工数据
    exportData.push.apply(exportData, dataList);
    
    //合并参数
    let mergeConf = LAY_EXCEL.makeMergeConfig([
        ['A1', 'I1'],
        ['A2', 'A3'],
        ['F2', 'F3'],
        ['G2', 'G3'],
        ['B2', 'E2'],
        ['H2', 'I2']
    ]);
    //配置列宽
    let colConf = LAY_EXCEL.makeColConfig({
        F: 100,
        G: 150
    });
    
    //导出数据
    LAY_EXCEL.exportExcel(exportData, '导出测试.xlsx', 'xlsx', {
        extend: {
            '!merges': mergeConf,
            '!cols': colConf
        }
    });
}

此时点击导出，则可以看到对应标题了，效果如下：

但是大家会发现，上图中线框并未画完整，这是因为每行中字段有缺失，只有从开始合并位置单元格有绘制线条。这问题解决也简单，在梳理标题数据位置，将缺失字段补充上并赋值为空即可。代码如下：


//梳理标题数据
let titleList = LAY_EXCEL.filterExportData((() => {
    let newArr = [];
    titles.forEach(item => {
        let tmpData = {};
        ['name', 'age', 'gender', 'high', 'weight', 'mobile', 'email', 'province', 'city'].forEach(key => {
            //补充缺失字段
            if('undefined'===typeof item[key]){
                tmpData[key] = '';
            }else{
                tmpData[key] = item[key];
            }
        });
        //创建新数据
        newArr.push(tmpData);
    });
    return newArr;
})(), getCellStyle());

在梳理标题数据时，将传入filterExportData()函数中数据通过 匿名函数重新组合，补充缺失部分，最后效果如下：

大家会发现，getCellStyle()函数和梳理标题数据的 匿名函数中，都使用到了所有字段数组，这里可略作修改，以便后期更方便维护，定义一个公共字段数组，代码如下：


exportEvent(){
    var titles = [
            {
                name: "员工信息统计表"
            },
            {
                name: "姓名", 
                age: "基本信息", 
                mobile: "手机号", 
                email: "邮箱", 
                province: "地址信息"
            },
            {
                age: "年龄", 
                gender: "性别", 
                high: "身高", 
                weight: "体重", 
                province: "所在省", 
                city: "所在市"
            }
        ], 
        data = [
        {
            name: "李四", 
            age: 72, 
            gender: 1, 
            high: 164, 
            weight: 80, 
            mobile: 15627070182, 
            email: "test15627070182@qq.com", 
            province: "湖北省", 
            city: "长沙市"
        },
        {
            name: "张三", 
            age: 60, 
            gender: 1, 
            high: 161, 
            weight: 75, 
            mobile: 15621397301, 
            email: "test15621397301@qq.com", 
            province: "浙江省", 
            city: "台州市"
        },
        {
            name: "王五", 
            age: 82, 
            gender: 1, 
            high: 170, 
            weight: 72, 
            mobile: 15684572039, 
            email: "test15684572039@qq.com", 
            province: "安徽省", 
            city: "六安市"
        },
        {
            name: "赵六", 
            age: 56, 
            gender: 2, 
            high: 166, 
            weight: 50, 
            mobile: 15694331283, 
            email: "test15694331283@qq.com", 
            province: "江苏省", 
            city: "苏州市"
        }
    ], 
        //公共样式
        commonStyle = {
            font: {    sz: 12 },
            alignment: {
                vertical: "center",
                horizontal: "center"
            },
            border: {
                top: {style: 'thin', color: {rgb: '666666'}},
                bottom: {style: 'thin', color: {rgb: '666666'}},
                left: {style: 'thin', color: {rgb: '666666'}},
                right: {style: 'thin', color: {rgb: '666666'}}
            }
        },
        keys = ['name', 'age', 'gender', 'high', 'weight', 'mobile', 'email', 'province', 'city'],
        exportData = [];
    
    function getCellStyle(styleParam){
        styleParam = styleParam || {};
        
        let tmpData = {};
        keys.forEach(item => {
            tmpData[item] = function(value, line, data){
                return {
                    v: value,
                    s: {
                        ...commonStyle,
                        ...styleParam
                    }
                }
            }
        });
        return tmpData;
    }
    
    //梳理标题数据
    let titleList = LAY_EXCEL.filterExportData((() => {
        let newArr = [];
        titles.forEach(item => {
            let tmpData = {};
            keys.forEach(key => {
                //补充缺失字段
                if('undefined'===typeof item[key]){
                    tmpData[key] = '';
                }else{
                    tmpData[key] = item[key];
                }
            });
            //创建新数据
            newArr.push(tmpData);
        });
        return newArr;
    })(), getCellStyle({
        font: {    sz: 12, bold: true }
    }));
    //梳理数据
    let dataList = LAY_EXCEL.filterExportData(data, getCellStyle());
    
    //略...
}

3.6 修改标题样式

这里我们想给标题进行加粗，要如何实现呢。在前面已定义了getCellStyle()函数，这里我们可以通过传入新新式参数，将公共部分进行替换，代码如下：


exportEvent(){
    //略...
    
    function getCellStyle(styleParam){
        styleParam = styleParam || {};
        
        let tmpData = {};
        ['name', 'age', 'gender', 'high', 'weight', 'mobile', 'email', 'province', 'city'].forEach(item => {
            tmpData[item] = function(value, line, data){
                return {
                    v: value,
                    s: {
                        ...commonStyle,
                        ...styleParam
                    }
                }
            }
        });
        return tmpData;
    }
    
    //梳理标题数据
    let titleList = LAY_EXCEL.filterExportData((() => {
        let newArr = [];
        titles.forEach(item => {
            let tmpData = {};
            ['name', 'age', 'gender', 'high', 'weight', 'mobile', 'email', 'province', 'city'].forEach(key => {
                //补充缺失字段
                if('undefined'===typeof item[key]){
                    tmpData[key] = '';
                }else{
                    tmpData[key] = item[key];
                }
            });
            //创建新数据
            newArr.push(tmpData);
        });
        return newArr;
    })(), getCellStyle({
        font: { sz: 12, bold: true }
    }));
    //梳理数据
    let dataList = LAY_EXCEL.filterExportData(data, getCellStyle());
    
    //略...
}

效果图下：

觉醒法师
关注
  • 8
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Layui第三方扩展LAY_EXCEL导出数据表格的数据
夏已微凉、
10-21 2743
一、前言二、使用 LAY_EXCEL1、搜索2、使用3、快速开始的内容4、使用5、Layui下载 与 LAY_EXCEL下载 的区别 一、前言 由于layui自带的数据表格导出excel存在兼容性问题：导出的表格不能修改内容，提示如下： 选择是之后，关闭文件，再次打开，还是修改前的内容。 Layui 数据表格导出数据 二、使用 LAY_EXCEL 1、搜索 百度搜索关键字layui第三方组件，选择网址为 https://fly.layui.com/extend/，进入到 layui 组件页面 输入e.
excel导出并且合并单元格
08-25
参考代码cellStyle.setAlignment(HSSFCellStyle.ALIGN_RIGHT); cellStyle.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER); cellStyle.setBorderBottom(HSSFCellStyle.BORDER_THIN); //下边框 cellStyle.setBorderLeft(HSSFCellStyle.BORDER_THIN);//左边框 cellStyle.setBorderTop(HSSFCellStyle.BORDER_THIN);//上边框 cellStyle.setBorderRight(HSSFCellStyle.BORDER_THIN);//右边框 if(Len==3){ if(x>0&&v==0) celldata.setCellValue(new HSSFRichTextString(""+monery+"")); if(y>0&&v==1) celldata.setCellValue(new HSSFRichTextString(""+monery1+"")); if(z>0&&v==2) celldata.setCellValue(new HSSFRichTextString(""+monery2+"")); }else if(Len==2){ if(x>0&&v==0) celldata.setCellValue(new HSSFRichTextString(""+monery+"")); if(y>0&&v==1) celldata.setCellValue(new HSSFRichTex
工具类ExportExcelUtil，layui进行Excel导出
最新发布
qq_53121751的博客
06-22 171
【代码】工具类ExportExcelUtil进行Excel导出。
纯前端table导出Excel合并行和合并列
weixin_45128657的博客
01-29 1037
table导出当页数据
导出Excel：合并单元格
m0_51079637的博客
09-27 1578
前言： 当我们开发的项目涉及到的数据量大的时候，进行会用到导出Excel，而导出Excel就要制作一个精美的表头以及简单易懂的数据表现形式，这就要对单元格进行样式渲染，及对数据的合并。 一、引入Jar包 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.16</version&gt.
excel格式导出合并单元格
weixin_42867178的博客
11-25 1717
1.首先看一下，我们导出的模板； 可以看到，导出的模板需要合并单元格，其中在每个项目中工程编号是唯一的，所以需求中有一点，我们必选按照：项目名称+工程编号，作为唯一性来做每个sheet的区分。下面看代码： 2.在看一下实体类，主要是数据的组合和单元格合并设置 public class EstimatedExcel { /** * 植物数据标题 */ private String[] titles = {"植物名称", "型号", "种植面积", "预估种植数
导出excel合并单元格
qq_29539827的博客
12-02 1412
导出表格 package ExcelTest; import java.io.File; /** * 导出excel工具类(支持合并单元格) * * @author yulisao * @createDate 2020年11月16日 */ public class mergeCellUtil { private static final short FONT_SIZE_TITLE = 14; //标题字体大小 private static final short FONT_SIZE_
LAY-EXCEL 简单快捷的导出插件
11-06
LAY-EXCEL 简单快捷的导出插件，现有导出前端库中，XLSX.JS功能强大但是操作颇为不便，于是封装了此插件，无额外依赖，支持 npm 引入，支持 Layui插件形式加载，导出仅需一句话。导出excel功能基于 XLSX.js，下载...
layui数据表格导出Excel插件
07-20
<table id="demo" lay-filter="test"> ``` ```javascript layui.use(['table'], function(){ var table = layui.table; // 数据表格的配置代码... }); ``` 3. 添加导出按钮：在layui的工具栏中添加一个按钮，...
layui-excel:简单快捷的导出插件，导出仅需一句话
05-02
LAY-EXCEL 简单快捷的导出插件 现有导出前端库中，XLSX.JS功能强大但是操作颇为不便，于是封装了此插件，无额外依赖，支持 npm 引入，支持 Layui插件形式加载，导出仅需一句话。 导出excel功能基于 XLSX.js，下载...
jquery 导出excel
08-14
name: "Excel Document Name",//导出的Excel文档的名称。 filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, ""),//Excel文件的名称。 fileext: ".xls",//导出文档后缀名 exclude_img: ...
Javascript导出Excel，自动合并单元格、自动列宽、有进度条
06-28
js导出execl，自动合并单元格，自动增行，增列
导出自动合并单元格.java
06-17
支持大数据量导出excel。自动合并相同数据单元格，可根据id自动识别是否合并，支持自定义类型数据转换，根据实体类自动识别。
layui lay-verify form表单自定义验证规则详解
10-16
今天小编就为大家分享一篇layui lay-verify form表单自定义验证规则详解，具有很好的参考价值，相信我对大家有所帮助。一起跟随小编过来看看吧
前端导出Excel合并单元格
chunchun_H
12-14 1319
前端导出Excel，合并单元格，复杂表格，单元格样式设置
layui导出excel动态拆分单元格一个单元格显示多行数据合并单元格
撒野
03-30 3066
首先说明是不能拆分单元格的，因为单元格是最小单位。只能通过合并单元格来实现。 实现思路：点击导出按钮，去请求后端数据。data数据如下：
java导出Excel合并单元格
热门推荐
datangxiajun的博客
10-22 5万+
网上java导出excel表格并合并单元格的资料不完全，我整理了一份，并亲测能用，附截图。 ①java导出excel用到POI所有jar包，大家可以直接到下面地址下载点击打开链接 ②模拟数据类 package org; public class WorkSheetDetail { //工作内容 private String workCtx; // 用工人总数 工日数
【EasyExcel】EasyExcel合并指定列单元格导出详解&设置导出样式
Etui۹(･༥･´)و的博客
05-16 3259
介绍CellWriteHandler接口CellWriteHandler接口用于在单元格创建和处理的各个阶段执行自定义逻辑。和。创建ExcelMergeHandler类并实现CellWriteHandler接口java复制代码public class ExcelMergeHandler implements CellWriteHandler {@Override// 单元格创建前的处理（这里不需要处理）@Override// 单元格创建后的处理（这里不需要处理）@Override。
Excel导出且合并相同值的单元格
前路漫漫，少年，继续披荆斩棘！
11-14 1560
合并Excel指定列的单元格
lay-submit lay-filter
06-28
### 回答1： lay-submit和lay-filter是layui框架中的两个重要属性。 lay-submit是表单提交按钮的属性，用于指定表单提交的按钮。当用户点击该按钮时，会触发表单的提交事件。 lay-filter是表单过滤器的属性，用于指定表单的过滤器。当表单提交时，会先执行过滤器函数，然后再执行表单提交事件。过滤器函数可以用来验证表单数据的合法性，如果数据不合法，可以阻止表单提交，或者给出错误提示。 总之，lay-submit和lay-filter是layui框架中非常重要的属性，可以帮助我们更方便地处理表单提交和数据验证。 ### 回答2： lay-submit和lay-filter在layui框架中是两个重要的属性。lay-submit被用来定义某个表单中提交按钮的样式及其事件。而lay-filter则是用来标识表单的唯一标识，在接收表单数据时方便识别。 lay-submit的作用： 在layui框架中，我们需要使用表单来进行数据的输入和提交。通常，每个表单中都会有一个提交按钮，这个按钮会触发表单提交事件。在layui中，我们可以使用lay-submit来定义某个表单中的提交按钮的样式及其事件。 具体来说，我们可以通过以下代码来实现： <form class="layui-form" action=""> <!-- 表单项等 --> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button> </div> </div> </form> 在上述代码中，通过添加属性lay-submit和lay-filter来定义提交按钮的样式和事件。其中，lay-submit表示当前按钮为表单提交按钮，而lay-filter则是为了识别这个表单的唯一标识。 使用lay-filter的作用： 在layui框架中，lay-filter被广泛用于标识表单的唯一标识。这个标识在表单提交时是非常重要的，因为它能够方便地识别表单的内容并接收表单提交的数据。 具体来说，在我们需要提交表单数据时，我们可以使用以下代码： layui.use('form', function(){ var form = layui.form; //监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); 在上述代码中，我们使用了表单的唯一标识lay-filter="formDemo"来监听表单的提交事件，并通过将表单数据转化为JSON格式来获取表单提交的数据。 因此，lay-submit和lay-filter在layui框架中是非常重要的属性，他们分别被用于定义表单提交按钮的样式和事件，以及方便识别表单的唯一标识。在layui的表单开发中，我们经常需要使用这两个属性来实现表单的提交和数据接收。 ### 回答3： lay-submit lay-filter 是 layui 框架中常见的两个属性。lay-submit 用于定义一个表单内提交按钮的行为，而 lay-filter 则用于定义表单元素的筛选器，用于过滤表单中的元素。 在 layui 中，使用 lay-submit 定义按钮的行为时，需要将它作为 button 元素的一个属性来使用。例如： <button lay-submit>提交</button> 这将会给按钮绑定默认的提交表单事件。当按钮被点击时，直接触发表单提交行为。 此外，如果使用 layui.form 做表单的渲染，可以在 form 元素上设置 lay-filter，用于筛选出需要操作的表单元素。例如： <form class="layui-form" lay-filter="form-demo"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="form-demo">提交</button> </div> </div> </form> 在上面的代码中，表单使用了 lay-filter="form-demo"，而提交按钮也使用了 lay-filter="form-demo"。这样，当按钮被点击时，就会触发表单提交行为，并且只有表单内带有 lay-filter="form-demo" 的元素才会被提交。 总之，lay-submit lay-filter 在 layui 中经常被用来定义表单的行为和筛选表单元素，是一个比较常见的功能组合。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值