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

Posted 2022-02-06 葡萄城技术团队

在上篇中，我们介绍了如何通过设置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其他强大功能感兴趣，可以实际来体验一下。