在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[0]);
isSpan.value = spans && spans.length > 0
}

复制代码

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

let mergeCell = ()=>{
// console.log(isSpan)
var sheet = workbook.getActiveSheet(), selections = sheet.getSelections();
var sel = selections[0];
if(isSpan.value){
var spans= sheet.getSpans(sel);
for(var i = 0; i < spans.length; i++){
sheet.removeSpan(spans[i].row, spans[i].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技术社区

image.png891658325.png

		自动登录	找回密码
密码			立即注册

在VUE 3中使用SpreadJS（二）

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章