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"],}]}});}configmandMap={};Object.assign(configmandMap, 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",