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

vue

在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件。想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一)。

但是在实际场景中,我们可能只需要动态创建VUE组件,而组件的template内容并不需要动态加载。面对这种情况, autoComplete就是一个很典型使用场景。

autoComplete可以让我们自由将任何接受接收到的输入内容转化成含有标签<input>、<textarea>和带有contenteditable属性的元素。在完成键盘输入时,插件开始搜索匹配的条目并显示可供选择的值列表。通过输入更多字符,用户可以过滤列表以更好地匹配。

在前端电子表格中,我们可以直接用它对内容进行选择,例如输入文章的标签或输入地址簿中的电子邮件地址。;自动完成功能还可用于填充相关信息,例如输入城市名称和获取邮政编码。而现在想在纯前端表格中实现这一功能,我们就可以将动态创建的Component固化,按需import 然后挂载即可。

这样就简化了我们在上篇中提到的,需要开启runtimeCompiler来实现了。

接下来为大家介绍具体做法:

  1. 封装AutoComplete组件封装的组件

  <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>

需要注意一下几点

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

2、autoComplete直接挂载组件,不再需要额外动态声明

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

这系列两篇文章详细为大家介绍使用两种不同的方式,解决由于框架生命周期以及自定义单元格渲染逻辑的问题,目前无法直接在框架页面下直接通过template的方式使用框架下的组件的问题。而我们使用Vue顺利解决了这个问题,并在第二种方式中进行了优化,有效提高代码的易维护性。

后续我们也会从其他角度,为大家带来更有有趣的内容~如果你对纯前端电子表格SpreadJS其他强大功能感兴趣,可以实际来体验一下。

以上是 使用VUE组件创建SpreadJS自定义单元格(二) 的全部内容, 来源链接: utcz.com/z/377438.html

回到顶部