使用VUE组件创建SpreadJS自定义单元格(二)

收藏

本帖最后由 dexteryao 于 2022-1-10 15:26 编辑

前一篇通过设置runtimeCompiler为true，动态编译组件让SpreadJS支持了动态创建VUE组件。

但是实际场景我们可能只需要动态创建VUE组件，而组件的template内容并需要动态。其实autoComplete也属于这种场景。
那我们就可以将动态创建的Component固化，按需import 然后挂载即可。这样就不需要开启runtimeCompiler了

具体做法
1. 封装AutoComplete组件封装的组件，需要注意一下几点

组件提供text(或者value）属性，用于对应单元格需要编辑的值，组件中如果不是用model双向绑定，操作后需要主动更新text
提供cellStyle，用户CellType根据单元格大小控制组件的大小
组件如果有注入的DOM元素不在template div内部，需要添加gcUIElement属性，原因在上一篇有说明

<template>
<div>
<el-autocomplete
:style="cellStyle"
popper-class="my-autocomplete"
v-model="text"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
:popper-append-to-body="false"
value-key="name"
@select="handleSelect"
>
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick"
>
</i>
<template slot-scope="{ item }">
<div class="name">{{ item.name }}</div>
<span class="addr">{{ item.phone }}</span>
</template>
</el-autocomplete>
</div>
</template>
<script>
import DataService from '../static/dataService'
export default {
props: ['text','cellStyle'],
mounted() {
this.items = DataService.getEmployeesData();
},
methods: {
querySearch(queryString, cb) {
var items = this.items;
var results = queryString ? items.filter(this.createFilter(queryString)) : items;
// 无法设置动态内容的位置，可以动态添加gcUIElement
// setTimeout(() => {
// let popDiv = document.getElementsByClassName("my-autocomplete")[0];
// if(popDiv){
// popDiv.setAttribute("gcUIElement", "gcEditingInput");
// }
// }, 500);
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item) {
console.log(item);
},
handleIconClick(ev) {
console.log(ev);
}
}
}
</script>

复制代码

2 .autoCompleteCellType直接挂在组件，不需要动态声明了

import AutoComplete from '../components/AutoComplete'

复制代码

AutoComplateCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
let width = cellRect.width > 180 ? cellRect.width : 180;
if (editorContext) {
// create component constructor
const AutoCompleteCtor = Vue.extend(AutoComplete);
this.vm = new AutoCompleteCtor({
propsData: {
cellStyle: {width: width+"px"}
}
}).$mount(editorContext.firstChild);
}
};

复制代码

其余代码不变，参考前一篇文章，这样不仅不需要runtimeCompiler，代码可维护行也提高了。

梅梅梅梅 · 梅梅梅梅

请问这个是把第一篇的 image.png575606383.png

替换成上面的组件吗？
另外这个import DataService from '../static/dataService'文件指的是什么？

Derrick.Jiao · Derrick.Jiao

梅梅梅梅发表于 2022-7-22 15:27
请问这个是把第一篇的替换成上面的组件吗？
另外这个import DataService from '../static/dataService'文 ...

AutoCompleteCtor从第一篇文章引入即可。

import DataService from '../static/dataService'这个文件可以忽略，这个对自定义单元格没有作用。

孙志强 · 孙志强

请问有基于vue3的demo吗

Lynn.Dou · Lynn.Dou

目前没有vue3的demo，您可以参考上述思路自己实现下。

sanyue · sanyue

孙志强发表于 2022-7-26 16:02
请问有基于vue3的demo吗

请问基于vue3的您实现了吗？

孙志强 · 孙志强

sanyue 发表于 2023-6-1 09:36
请问基于vue3的您实现了吗？

实现了，我做了一些改造，直接使用组件挂载到#gcEditingInput下更方便

Joestar.Xu · Joestar.Xu

孙志强发表于 2023-7-18 11:42
实现了，我做了一些改造，直接使用组件挂载到#gcEditingInput下更方便

您好，您是如何实现的呢？能否提供一下您的代码，让大家一起学习学习

孙志强 · 孙志强

本帖最后由孙志强于 2023-7-19 10:36 编辑

Joestar.Xu 发表于 2023-7-18 15:17
您好，您是如何实现的呢？能否提供一下您的代码，让大家一起学习学习

大概流程是：activateEditor激活了，将放置在#gcEditingInput下的自定义组件显示，并将当前的值传递到组件中，修改完毕后在getEditorValue返回组件的值，然后在deactivateEditor里隐藏组件
image.png837668762.png

Lynn.Dou · Lynn.Dou

孙志强发表于 2023-7-19 10:24
大概流程是：activateEditor激活了，将放置在#gcEditingInput下的自定义组件显示，并将当前的值传递到组 ...

感谢分享，给您送上金币奖励

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

使用VUE组件创建SpreadJS自定义单元格(二)

17 个回复

评分

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章

GrapeCity