乐趣区

关于前端:使用VUE组件创建SpreadJS自定义单元格二

jiezi

在上篇中，咱们介绍了如何通过设置 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 其余弱小性能感兴趣，能够理论来体验一下。

退出移动版