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

1、准备项目环境Vue3

自行准备node.js环境

2、Element Plus官网

官网

安装教程自行参照官网

3、Univer插件官网

　　1)官网网址

　　2)开始

　　直接点击 Get Started　　

侧边栏点击

后面直接按照教程走即可

4、配置插件需要注意

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

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

1 2	`<code-pre` `class="code-pre" id="pre-yFnDxa"><code-line` `class="line-numbers-rows"></code-line><div` `ref="container" class="univer-container" ></div>` `</code-pre>`

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

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

<code-pre class="code-pre" id="pre-KZAkjd"><code-line class="line-numbers-rows"></code-line><div style="height: 600px;width: 1280px;" id="app">
<code-line class="line-numbers-rows"></code-line>      <div ref="container" class="univer-container" ></div>
<code-line class="line-numbers-rows"></code-line></div>
</code-pre>

<code-pre class="code-pre" id="pre-ME42ct"><code-line class="line-numbers-rows"></code-line>    <div style="height: 100%;width: 100%;" id="app">
<code-line class="line-numbers-rows"></code-line>      <div ref="container" class="univer-container" ></div>
<code-line class="line-numbers-rows"></code-line>    </div>
<code-line class="line-numbers-rows"></code-line>
</code-pre>

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

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

__EOF__

本文作者：往心。
本文链接：https://www.cnblogs.com/lx06/p/18517869.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！