本帖最后由 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,代码可维护行也提高了。
|
|