spreadjs设计器自定义在线表格

2023-10-21 09:12
文章标签 设计 自定义 表格 在线 spreadjs

本文主要是介绍spreadjs设计器自定义在线表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

spreadjs设计器自定义在线表格

spreadjs：16

<template><div class="app-container"><el-row :gutter="20"><el-col :span="otherSpan" :xs="24"><!--    excel在线表格    --><el-row :gutter="10" class="mb8" v-if="tableAttributes"><gc-spread-sheets-designer :styleInfo='styleInfo':config='config'@designerInitialized="designerInitialized"class="excel-class"></gc-spread-sheets-designer></el-row></el-col></el-row></div>
</template><script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { mul } from '@/utils/util'
import  '@grapecity/spread-sheets-vue'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-designer-resources-cn'
import '@grapecity/spread-sheets-designer-vue'
import * as GC from '@grapecity/spread-sheets'
import * as DesignerGC from '@grapecity/spread-sheets-designer'
//设置中文语言环境
GC.Spread.Common.CultureManager.culture('zh-cn')
//授权
GC.Spread.Sheets.LicenseKey = 'your key';
DesignerGC.Spread.Sheets.Designer.LicenseKey = "your key";
export default {name: 'Scoring',data() {return {styleInfo: { height: '725px', width: '100%' },config: null,spread: null,}},methods: {//获取spread实例designerInitialized: function (designer) {this.spread = designer.getWorkbook();let config = GC.Spread.Sheets.Designer.DefaultConfig;//创建按钮let dataSaveInfo = {'saveTemplateCommand':{iconClass:'ribbon-button-save',  //按钮的样式text: "保存", //显示的文字bigButton: true,commandName: "saveData", //命令名称，需要全局唯一execute: this.saveInfo //对应执行内容的function}}//将图标放入工具栏if (!(config.ribbon[0].buttonGroups[0].label === '保存')){config.ribbon[0].buttonGroups.unshift( {label:'保存',thumbnailClass:'ribbon-thumbnail-spreadsettings',commandGroup:{children:[{direction: "vertical",commands: ["saveTemplateCommand"],}]}});}config.commandMap={};Object.assign(config.commandMap, dataSaveInfo);this.config = config;this.spread.options.newTabVisible = false;this.spread.options.tabNavigationVisible = false;this.spread.options.scrollbarMaxAlign = true;this.spread.invalidateLayout();this.spread.repaint();},//初始化在线表格initSpreadSheet(){let sheet = this.spread.getSheet(0);sheet.name("汇总");sheet.setDataSource(this.dataTable);var colInfos = [{ name: "yf", displayName: "月份",size: 180 },{ name: "fzbm", displayName: "部门", size: 180 },{ name: "xjxz", displayName: "新疆西藏项目", size: 180 },{ name: "sfzs", displayName: "赠送/区域项目", size: 180 },{ name: "zcsjzl", displayName: "资产治理项目", size: 180 },{ name: "xffhs", displayName: "新方法核算", size: 180 },{ name: "sfwnxm", displayName: "是否新项目", size: 180 },{ name: "status", displayName: "数据状态", size: 180 },{ name: "xh", displayName: "唯一项目编号", size: 180 },{ name: "xmbh", displayName: "项目编号",size: 180 },{ name: "khmc", displayName: "客户名称", size: 180 },{ name: "sjkhmc", displayName: "实际客户名称", size: 180 },{ name: "ysdsftj", displayName: "纸质验收单是否提交", size: 180 },{ name: "sfsydzxt", displayName: "是否使用对账系统", size: 180 },{ name: "xmjlbh", displayName: "项目经理编号", size: 180 },{ name: "xmjlxm", displayName: "项目经理", size: 180 },{ name: "ysgsbh", displayName: "验收绩效归属员工编号", size: 180 },{ name: "ysgsxm", displayName: "验收绩效归属", size: 180 },{ name: "fwrybh", displayName: "服务人员员工编号", size: 180 },{ name: "fwryxm", displayName: "服务人员", size: 180 },{ name: "fwryfs", displayName: "服务人员打分", formatter:'0.00', size: 180 },{ name: "zcts", displayName: "项目验收总资产条数", formatter:'0', size: 180 },{ name: "xmlb", displayName: "项目类别", formatter:'0', size: 180 },{ name: "xmdj", displayName: "项目单价", formatter:'0.00', size: 180 },{ name: "jdzb", displayName: "工作环节占全流程比例", formatter:'0.00%', size: 180 },{ name: "xmzjx", displayName: "项目总绩效", formatter:'0.00', size: 180 },{ name: "bz", displayName: "备注", size: 180 },];sheet.bindColumns(colInfos);this.spread.resumePaint();},//保存点击事件,进行信息保存saveInfo(e){let sheet = this.spread.getSheet(0);let data = sheet.getDataSource();saveOnlineExcelInfo(data).then(res => {this.tableAttrbute = true;this.tableAttributes = false;this.$message.success(res.msg);this.back = false;});}}
}
</script><style scoped lang="scss">
.tree-area {max-height: 80vh;overflow: auto;
}
.el-descriptions {width: 30%;padding-left: 4em;::v-deep .my-label {font-weight: 600;}
}
.excel-class {::v-deep .ribbon-button-save {background-image: url('../../../assets/images/save.jpg');}
}
</style>

16所需要的依赖

		"@grapecity/spread-excelio": "^16.2.4","@grapecity/spread-sheets": "^16.2.4","@grapecity/spread-sheets-barcode": "^16.2.4","@grapecity/spread-sheets-charts": "^16.2.4","@grapecity/spread-sheets-designer": "^16.2.4","@grapecity/spread-sheets-designer-resources-cn": "^16.2.4","@grapecity/spread-sheets-designer-resources-en": "^16.2.4","@grapecity/spread-sheets-designer-vue": "^16.2.4","@grapecity/spread-sheets-io": "^16.2.4","@grapecity/spread-sheets-languagepackages": "^16.2.4","@grapecity/spread-sheets-pdf": "^16.2.4","@grapecity/spread-sheets-pivot-addon": "^16.2.4","@grapecity/spread-sheets-print": "^16.2.4","@grapecity/spread-sheets-resources-zh": "^16.2.4","@grapecity/spread-sheets-shapes": "^16.2.4","@grapecity/spread-sheets-tablesheet": "^16.2.4","@grapecity/spread-sheets-vue": "^16.2.3",

12版本

<template><div class="app-container"><el-row :gutter="20"><el-col :span="otherSpan" :xs="24"><!--    excel在线表格    --><el-row :gutter="10" class="mb8" v-if="tableAttributes"><gc-spread-sheets:hostClass='hostClass'@workbookInitialized="designerInitialized"></gc-spread-sheets></el-row></el-col></el-row></div>
</template><script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { mul } from '@/utils/util'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-resources-zh'
import * as SpreadLicense from "../../../utils/spread/spread-license"
import ExcelIo from '@grapecity/spread-excelio'
import * as GC from '@grapecity/spread-sheets'//设置中文环境
GC.Spread.Common.CultureManager.culture("zh-cn");
const spreadLicenseInit = function (){const SpreadNs = GC.Spread.Sheets;SpreadLicense._de2343();ExcelIo.LicenseKey = SpreadNs.LicenseKey;
}
spreadLicenseInit();
import  '@grapecity/spread-sheets-vue'
export default {name: 'Scoring',data() {return {hostClass:'spread-host',autoGenerateColumns:true,width:300,visible:true,resizable:true,scrollbarMaxAlign:true,scrollbarShowMax:true,pageColor:"white",worksheetName:'汇总',dataTable:[],spread: null,back:false,save:false,displayOrHide:true,}},methods: {//获取spread实例designerInitialized: function (spread) {this.spread = spread;this.spread.options.newTabVisible = false;this.spread.options.tabNavigationVisible = false;this.spread.options.scrollbarMaxAlign = true;this.spread.options.tabStripVisible = false;this.spread.options.scrollbarShowMax = true;this.spread.options.showVerticalScrollbar = false;this.spread.options.grayAreaBackColor = 'white'this.spread.options.allowUserEditFormula = true;this.spread.invalidateLayout();this.spread.repaint();},//初始化在线表格initSpreadSheet(){let sheet = this.spread.getSheet(0);sheet.setDataSource(this.dataTable);sheet.setRowHeight(0, 55.0,GC.Spread.Sheets.SheetArea.colHeader);let row = sheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);row.backColor("#cccccc");row.font("16px")var colInfos = [{ name: "yf", displayName: "月份",size: 180 ,formatter: '@'}, // formatter='@'标识展示文本格式{ name: "fzbm", displayName: "部门", size: 180 ,formatter: '@'},{ name: "xjxz", displayName: "新疆西藏项目", size: 180 ,formatter: '@'},{ name: "sfzs", displayName: "赠送/区域项目", size: 180 ,formatter: '@'},{ name: "zcsjzl", displayName: "资产治理项目", size: 180 ,formatter: '@'},{ name: "xffhs", displayName: "新方法核算", size: 180 ,formatter: '@'},{ name: "sfwnxm", displayName: "是否新项目", size: 180 ,formatter: '@'},{ name: "status", displayName: "数据状态", size: 180 ,formatter: '@'},{ name: "xh", displayName: "唯一项目编号", size: 180 ,formatter: '@'},{ name: "xmbh", displayName: "项目编号",size: 180 ,formatter: '@'},{ name: "khmc", displayName: "客户名称", size: 180 ,formatter: '@'},{ name: "sjkhmc", displayName: "实际客户名称", size: 180 ,formatter: '@'},{ name: "ysdsftj", displayName: "纸质验收单是否提交", size: 180 ,formatter: '@'},{ name: "sfsydzxt", displayName: "是否使用对账系统", size: 180 ,formatter: '@'},{ name: "xmjlbh", displayName: "项目经理编号", size: 180 ,formatter: '@'},{ name: "xmjlxm", displayName: "项目经理", size: 180 ,formatter: '@'},{ name: "ysgsbh", displayName: "验收绩效归属员工编号", size: 180,formatter: '@' },{ name: "ysgsxm", displayName: "验收绩效归属", size: 180,formatter: '@' },{ name: "fwrybh", displayName: "服务人员员工编号", size: 180 ,formatter: '@'},{ name: "fwryxm", displayName: "服务人员", size: 180 ,formatter: '@'},{ name: "fwryfs", displayName: "服务人员打分", formatter:'0.00', size: 180 },{ name: "zcts", displayName: "项目验收总资产条数", formatter:'0', size: 180 },{ name: "xmlb", displayName: "项目类别", formatter:'0', size: 180 }, //展示整数{ name: "xmdj", displayName: "项目单价", formatter:'0.00', size: 180 }, //数字格式，保留两位小数{ name: "jdzb", displayName: "工作环节占全流程比例", formatter:'0.00%', size: 180 }, //标识展示百分数{ name: "xmzjx", displayName: "项目总绩效", formatter:'0.00', size: 180 },{ name: "bz", displayName: "备注", size: 180 ,formatter: '@'},];sheet.bindColumns(colInfos);// 在你的数据范围上启用筛选功能sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(-1, 0, 0, 27)));sheet.options.isProtected = false;this.spread.resumePaint();} 
}
</script><style scoped lang="scss">
.tree-area {max-height: 80vh;overflow: auto;
}
.el-descriptions {width: 30%;padding-left: 4em;::v-deep .my-label {font-weight: 600;}
}
.spread-host{width: 100%;height: 700px;
}
</style>

所需依赖

    "@grapecity/spread-excelio": "12.2.1","@grapecity/spread-sheets": "12.2.1","@grapecity/spread-sheets-print": "12.2.1","@grapecity/spread-sheets-resources-zh": "12.2.1","@grapecity/spread-sheets-vue": "12.2.1",

这篇关于spreadjs设计器自定义在线表格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/253410。

相关文章

使用Sentinel自定义返回和实现区分来源方式

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》：本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定
阅读更多...
利用Python开发Markdown表格结构转换为Excel工具

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark
阅读更多...
如何自定义Nginx JSON日志格式配置

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志？配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各
阅读更多...
Android自定义Scrollbar的两种实现方式

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一：ItemDecoration实现（推荐用于RecyclerView）实现原理完整代码实现
阅读更多...
MySQL使用binlog2sql工具实现在线恢复数据功能

MySQL使用binlog2sql工具实现在线恢复数据功能

《MySQL使用binlog2sql工具实现在线恢复数据功能》binlog2sql是大众点评开源的一款用于解析MySQLbinlog的工具,根据不同选项,可以得到原始SQL、回滚SQL等,下面我们就来... 目录背景目标步骤准备工作恢复数据结果验证结论背景生产数据库执行 SQL 脚本，一般会经过正规的审批
阅读更多...
基于Spring实现自定义错误信息返回详解

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT
阅读更多...
Java利用poi实现word表格转excel

Java利用poi实现word表格转excel

《Java利用poi实现word表格转excel》这篇文章主要为大家详细介绍了Java如何利用poi实现word表格转excel,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、每行对象类需要针对不同的表格进行对应的创建。package org.example.wordToEx
阅读更多...
SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”（Authentication）“授权” （Auth
阅读更多...
使用EasyExcel实现简单的Excel表格解析操作

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》：本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis
阅读更多...
SpringBoot自定义注解如何解决公共字段填充问题

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2