在VUE 3中使用SpreadJS（二）
本帖最后由 dexteryao 于 2020-7-4 16:29 编辑在上一篇在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继续向上触发。
setup(props, {emit}) {
const ssHost = ref(null);
onMounted(() => {
var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);
emit("workbookInitialized", workbook)
workbook.bind(GC.Spread.Sheets.Events.SelectionChanged, (s, e)=>{<div class="blockcode"><blockquote>
e
mit("selectionChanged", s, e);
});
});
return {
ssHost
};
}
2. App添加合并/拆分单元格按钮App.vue页面template中添加button,点击按钮调用mergeCell方法，同时按钮中通过isSpan属性控制按钮文字内容
<button @click="mergeCell()"><span v-show="isSpan">拆分单元格</span><span v-show="!isSpan">合并单元格</span></button>3. App setup中监听workbookInitialized获取workbook对象
<SpreadSheets v-on:workbookInitialized="workbookInitialized" v-on:selectionChanged="selectionChanged"></SpreadSheets>
let isSpan = ref(false);4. 监听selectionChanged，获取选中区域，判断是否有合并单元格，改变isSpan状态
使用getSpans接口获取选中区域是否有合并单元格，无合并单元格则按钮显示合并，否则显示拆分
Demo演示简化，只选取了第一个选中区域
let selectionChanged = (s, e)=>{
var sheet = e.sheet, selections = e.newSelections;
var spans= sheet.getSpans(selections);
isSpan.value = spans && spans.length > 0
}5. 根据选中区域isSpan状态，实现合并/拆分逻辑
let mergeCell = ()=>{
// console.log(isSpan)
var sheet = workbook.getActiveSheet(), selections = sheet.getSelections();
var sel = selections;
if(isSpan.value){
var spans= sheet.getSpans(sel);
for(var i = 0; i < spans.length; i++){
sheet.removeSpan(spans.row, spans.col)
}
}
else{
if(sel.rowCount > 1||sel.colCount > 1){
sheet.addSpan(sel.row, sel.col, sel.rowCount, sel.colCount);
}
}
isSpan.value = !isSpan.value;
}setup返回配置项
return {
workbookInitialized,
isSpan,
mergeCell,
selectionChanged
}
合并/拆分单元格功能就实现了，可以看出在VUE 3中，有关统一逻辑的代码都可以写在setup中的同一区域。同样也可以将这些代码抽象封装到其他文件更加利于维护。
关于SpreadJS和VUE 3结合使用的更多内容可以继续关注SpreadJS技术社区
页:
[1]