在VUE 3中使用SpreadJS（二）

在上一篇在VUE 3中使用SpreadJS（一）中，已经使用vite搭建好了VUE 3项目，并且也将SpreadJS集成，创建了SpreadSheets组件。
其实在SpreadSheets.vue组件中，已经用到了VUE 3的新特性Composition API了，在setup 方法中使用了onMounted。关于组件的配置的集中在setup中，不同逻辑的书属性，方法可以集中放置，不需要向VUE 2中那样，同一同能逻辑分散在代码各处。
本文中我们将继续完善SpreadSheets组件，通过使用events实现合并拆分单元格的功能。


1. 触发workbookInitialized和selectionChanged事件
在SpreadSheets.vue中，初始化完成后触发事件workbookInitialized通知父组件，workbook已初始化并返回workbook对象，方便父组件调用接口操作。
同时workbook绑定SelectionChanged事件，事件触发时通过emit继续向上触发。

1. setup(props, {emit}) {
   
2.     const ssHost = ref(null);
   
3.     onMounted(() => {
   
4.       var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);
   
5.       emit("workbookInitialized", workbook)
   
6.       workbook.bind(GC.Spread.Sheets.Events.SelectionChanged, (s, e)=>{<div class="blockcode"><blockquote>
   
7.         e

复制代码

mit("selectionChanged", s, e);
      });
    });
    return {
      ssHost
    };
  }
2. App添加合并/拆分单元格按钮App.vue页面template中添加button,点击按钮调用mergeCell方法，同时按钮中通过isSpan属性控制按钮文字内容

1. 
   
2.   <button @click="mergeCell()"><span v-show="isSpan">拆分单元格</span><span v-show="!isSpan">合并单元格</span></button>

复制代码

3. App setup中监听workbookInitialized获取workbook对象

1.   <SpreadSheets v-on:workbookInitialized="workbookInitialized" v-on:selectionChanged="selectionChanged"></SpreadSheets>
   

复制代码

1. let isSpan = ref(false);

复制代码

4. 监听selectionChanged，获取选中区域，判断是否有合并单元格，改变isSpan状态
使用getSpans接口获取选中区域是否有合并单元格，无合并单元格则按钮显示合并，否则显示拆分
Demo演示简化，只选取了第一个选中区域

1. let selectionChanged = (s, e)=>{
   
2.       var sheet = e.sheet, selections = e.newSelections;
   
3.       var spans= sheet.getSpans(selections[0]);   
   
4.       isSpan.value = spans && spans.length > 0
   
5.     }

复制代码

5. 根据选中区域isSpan状态，实现合并/拆分逻辑

1.     let mergeCell = ()=>{
   
2.       // console.log(isSpan)
   
3.       var sheet = workbook.getActiveSheet(), selections = sheet.getSelections();
   
4.       var sel = selections[0];
   
5.       if(isSpan.value){
   
6.         var spans= sheet.getSpans(sel);      
   
7.         for(var i = 0; i < spans.length; i++){
   
8.           sheet.removeSpan(spans[i].row, spans[i].col)
   
9.         }
   
10.       }
    
11.       else{
    
12.         if(sel.rowCount > 1||sel.colCount > 1){
    
13.           sheet.addSpan(sel.row, sel.col, sel.rowCount, sel.colCount);
    
14.         }
    
15.       }
    
16.       isSpan.value = !isSpan.value;
    
17.     }

复制代码

setup返回配置项

1. 
   
2.     return {
   
3.       workbookInitialized,
   
4.       isSpan,
   
5.       mergeCell,
   
6.       selectionChanged
   
7.     }

复制代码

合并/拆分单元格功能就实现了，可以看出在VUE 3中，有关统一逻辑的代码都可以写在setup中的同一区域。同样也可以将这些代码抽象封装到其他文件更加利于维护。
关于SpreadJS和VUE 3结合使用的更多内容可以继续关注SpreadJS技术社区