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

1、准备项目环境Vue3

自行准备node.js环境

2、Element Plus官网

官网

安装教程自行参照官网

3、Univer插件官网

　　1)官网网址

　　2)开始

　　直接点击 Get Started　　

侧边栏点击

 

 后面直接按照教程走即可

 4、配置插件需要注意

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

1、插件需要一个div容器来放置（这边用了两个div进行容纳插件，具体可自行决定）

<div ref="container" class="univer-container" ></div>

2、放置插件的div需要和注册插件中设置的container进行绑定

3、放置容器的div长度和高度不能直接设置成为xx%,下面提供两种，若100%能显示，可用百分比设置，若百分比不能显示，可用第一种，自行设置大小。

<div style="height: 600px;width: 1280px;" 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文件中查看）

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