新人必看！手把手教你如何使用浏览器表格插件（下）

　import {defineComponent} from "Vue"

    // SpreadJS核心资源

    import GC from "@grapecity/spread-sheets"

    // 形状资源

    import "@grapecity/spread-sheets-shapes"

    // 二维码资源

    import "@grapecity/spread-sheets-barcode"

    // 图表资源

    import "@grapecity/spread-sheets-charts"

    // 文件IO相关资源

    import "@grapecity/spread-excelio"

    // 打印资源  打印资源要在pdf之前

    import "@grapecity/spread-sheets-print"

    // 导出pdf相关资源

    import "@grapecity/spread-sheets-pdf"

    // 透视表相关资源

    import "@grapecity/spread-sheets-pivot-addon"

    // 集算表相关资源

    import "@grapecity/spread-sheets-tablesheet"

    // 组件运行时样式信息

    import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"

    // 组件运行时语言资源

    import "@grapecity/spread-sheets-resources-zh"

    // 设计器资源，设计器资源要在设计器核心资源之前

    import "@grapecity/spread-sheets-designer-resources-cn"

    // 设计器核心资源

    import * as GcDesigner from "@grapecity/spread-sheets-designer"

    // 设计器css

    import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"

    // 设计器对Vue的支持资源

    import Designer from "@grapecity/spread-sheets-designer-Vue"

    import {bindFile} from "../files/bindFile"

    import {bindSchema,generateData} from "../files/bindTree.js"

const loadBindData = (spread:GC.Spread.Sheets.Workbook) => {

                 // 加载文件（第一步）

                spread.fromJSON(bindFile)

            }

   designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))

        designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))

        designer.setData('updatedTreeNode',JSON.stringify(bindSchema))

 const loadBindData = (spread:GC.Spread.Sheets.Workbook) => {

                 // 加载文件（第一步）

                spread.fromJSON(bindFile)

                //第三步绑定数据

                // mock数据

                let data = generateData(20)

                // 生成绑定数据源

                let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)

                // 获取当前活动sheet

                let sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet

                // 获取sheet中的目标表格，并将表格的数据设置为随数据量自动纵向扩展

                let table = sheet.tables.findByName('report_card')

                table.expandBoundRows(true)

                // 加载数据

                sheet.setDataSource(source)

            }

const initDesigner = (designerEntity:GcDesigner.Spread.Sheets.Designer.Designer) => {

                designer = designerEntity

                customeConfig(designer)

                //第二步绑定数据绑定表信息（designer初始化完成之后，加载右侧Tree）

                designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))

                designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))

                designer.setData('updatedTreeNode',JSON.stringify(bindSchema))

                let spread = designer.getWorkbook() as GC.Spread.Sheets.Workbook

                loadBindData(spread)

            }

 

 

const loadBindData = (spread:GC.Spread.Sheets.Workbook) => {

                 // 加载文件（第一步）

                spread.fromJSON(bindFile)

                //第三步绑定数据

                // mock数据

                let data = generateData(20)

                // 生成绑定数据源

                let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)

                // 获取当前活动sheet

                let sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet

                // 获取sheet中的目标表格，并将表格的数据设置为随数据量自动纵向扩展

                let table = sheet.tables.findByName('report_card')

                table.expandBoundRows(true)

                // 加载数据

                sheet.setDataSource(source)

            }

return{

            styleInfo,initDesigner

        }