本帖最后由 Web123.0 于 2022-5-6 11:51 编辑
技术栈：
- vue v2.x
- SpreadJS v15.0.4
- GcExcel v4.2.6
使用场景：
用户拖拽维度字段或者指标字段，移动至excel单元格上，拖拽结束后将拖拽字段赋值给当前鼠标悬停单元格中。
可保存，可预览，可编辑，可新建。
实现思路：
1、子组件：单元格默认绑定Text类型，且设置processMouseEnter方法，在方法中获取单元格信息（row、col），并通过$emit()方法将单元格信息返回给父组件。
2、父组件：拖拽字段时，根据子组件返回的单元格信息，定位目标单元格，结束拖拽时，对目标单元格进行赋值。
3、保存时，通过toJSON()方法获取所有配置信息（spreadJSON），并且保存。
4、编辑时，根据服务端返回的配置信息（spreadJSON），使用Workbook.fromJSON(spreadJSON)方法加载模板数据，并且展示模板内容。
5、新建时，使用Workbook.refresh()方法刷新（重置）excel内容。
问题：
1、编辑时，使用Workbook.fromJSON(spreadJSON)方法加载模板数据后，processMouseEnter方法失效。再次尝试拖拽字段修改模板时，无法获取目标单元格信息，导致不能将拖拽字段赋值到excel的单元格中。
2、新建时，使用Workbook.refresh()方法刷新后，processMouseEnter方法失效，影响同上。
有尝试在fromJSON方法和refresh方法执行之后，重新设置processMouseEnter，仍然无效。
子组件代码如下：
- <script>
- 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 '@grapecity/spread-sheets-resources-zh';
- import * as GC from '@grapecity/spread-sheets';
- import { sheetLicenseKey, designerLicenseKey } from '@/utils/spreadJSLicenseKey';
- GC.Spread.Common.CultureManager.culture('zh-cn');
- GC.Spread.Sheets.LicenseKey = sheetLicenseKey;
- GC.Spread.Sheets.Designer.LicenseKey = designerLicenseKey;
- const TipCellType = function () {};
- export default {
- <p style="line-height: 30px; text-indent: 2em;">name: 'SpreadJSDesigner',
- props: {
- config: {
- type: Object,
- require: false,
- },
- },
- data() {
- return {
- styleInfo: { width: '100%', height: '100%' },
- sheetClazz: null,
- spreadClazz: null,
- };
- },
- created() {
- this.initBindEvents();
- },
- methods: {
- designerInitialized(designer) {
- const vm = this;
- const spread = designer.getWorkbook();
- const { Events, SheetArea, ValueType, CellTypes } = GC.Spread.Sheets;
- // 点击按钮类事件绑定
- spread.bind(Events.ButtonClicked, function (e, args) {
- ...
- });
- // 列表类事件绑定
- spread.bind(Events.SelectionChanged, () => {
- ...
- });
- // 绑定单元格点击事件回调
- spread.bind(Events.CellClick, function (e, args) {
- ...
- });
- this.spreadClazz = spread;
- this.sheetClazz = spread.getActiveSheet();
- this.sheetClazz.AutoGenerateColumns = false;
- let defaultStyle = this.sheetClazz.getDefaultStyle();
- defaultStyle.cellType = new TipCellType();
- this.sheetClazz.setDefaultStyle(defaultStyle);
- this.$emit('sheet', this.sheetClazz);</p><p style="line-height: 30px; text-indent: 2em;"> ...
- },
- // 工作薄刷新
- handleRefresh() {
- this.spreadClazz.refresh();
- },
- // 获取配置数据
- getDataToJSON() {
- return this.spreadClazz.toJSON();
- },
- // 工作薄数据加载
- loadDataFromJSON(json) {
- if (!json) {
- return
- }
- let parseJSON = JSON.parse(json);
- // 调用Workbook.fromJSON()方法加载数据
- this.spreadClazz.fromJSON(parseJSON, { incrementalLoading: true });
- },
- // 初始化单元格鼠标事件
- initBindEvents() {
- const vm = this;
- TipCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
- TipCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
- return {
- x: x,
- y: y,
- row: context.row,
- col: context.col,
- cellStyle: cellStyle,
- cellRect: cellRect,
- sheetArea: context.sheetArea,
- };
- };
- TipCellType.prototype.processMouseEnter = function (hitinfo) {
- const { row, col } = hitinfo;</p><p style="line-height: 30px; text-indent: 2em;"> // 将单元格信息回调给父组件
- vm.$emit('callbackCellOver', { source: { row, col }, handle: { row: Number(row) + 1, col: Number(col) + 1 } });
- return false;
- };
- },
- },</p><p style="line-height: 30px; text-indent: 2em;"><span style="text-indent: 2em; text-align: center;">};</span></p><p style="line-height: 30px; text-indent: 2em;"></p></script>
|
|
来自 11#
陕公网安备：61019002000258 |
隐私政策 |
网站地图