Vue3+Elementplus+Univer实现在线excel及其需要注意的点

1、环境准备

Vue3项目创建以及Element Plus工具的安装，请参考上篇博客。
Vue3+element-plus安装配置简单介绍

2、UniverSheet插件安装引入

1 官网

2 安装引入

自行按照教程即可

3、需要注意的几点

如果上述插件包已经下载并成功引入Vue文件中，则需要注意如下几个问题

1、插件需要一个div容器来放置（这边用了两个div进行容纳插件，具体可自行决定）。
2、放置插件的div需要和注册插件中设置的container进行绑定。

univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
});

<div style="height: 100%;width: 100%;" id="app">
  <div ref="container" class="univer-container" ></div>
</div>

3、放置容器的div长度和高度不能直接设置成为xx%,下面提供两种，若100%能显示，可用百分比设置，若百分比不能显示，可用第一种，自行设置大小。
若出现如下形式，则可以设置高度为固定高度，宽度可为百分比。
下图即为百分比情况下的显示错误

<div style="height: 100vh;width: 100vw;" id="app">
      <div ref="container" class="univer-container" ></div>
</div>

<div style="height: 100%;width: 100%;" id="app">
  <div ref="container" class="univer-container" ></div>
</div>

4、注意插件的版本以及相应的工具包(例如：排序、筛选等等)的版本需要保持一致（具体下载包的版本可在项目的package.json文件中查看）

额外需要注意的是，及时关注官网的文档，版本不同情况下，前端引入的语句也可能不同。