vue项目中使用Luckysheet 的简单方法
Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。
开发环境
Node.js Version >= 6
引入方式① CDN
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css /> <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css /> <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css /> <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css /> <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script> <script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
引入方式② 源码方式
npm run build后dist文件夹下的所有文件复制到项目目录,然后通过相对路径引入 指定一个表格容器
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
然后创建一个表格
<script>
$(function () {
//配置项
var options = {
container: luckysheet //luckysheet为容器id
}
luckysheet.create(options)
})
</script>
最后可以预览效果:
有兴趣者,可以研究下官方实例,进行二开 ,请点击
