在自己的vue项目中使用luckysheet【持续更新】

vener__

已于 2024-12-06 11:45:05 修改

阅读量1.1k

点赞数 2

于 2024-10-11 09:05:45 首次发布

本文链接：https://blog.youkuaiyun.com/vener_/article/details/142844124

版权

Vue2 同时被 2 个专栏收录

4 篇文章

订阅专栏

luckysheet

2 篇文章

订阅专栏

按照官网的教程总是报$的错误，还有也不符合vue的规范，于是使用AI先生成了个demo

<template>
  <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</template>

<script>
export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log("初始化");
      if (typeof luckysheet !== "undefined") {
        var options = {
          container: "luckysheet", // luckysheet为容器id
          title: "luckysheet", // 表 头名
          lang: "zh" // 中文
        };
        console.log(luckysheet);
        luckysheet.create(options);
      } else { console.error("luckysheet 没有正确加载!"); }
    }
  }
};
</script>

但是会报TypeError: luckysheet.create is not a function的错误，且无法加载，并且编译器插件会报错，于是加上了两行注释忽略

<template>
  <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</template>

<script>
export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log("初始化");
      if (typeof luckysheet !== "undefined") {
        var options = {
          container: "luckysheet", // luckysheet为容器id
          title: "luckysheet", // 表 头名
          lang: "zh" // 中文
        };
        // eslint-disable-next-line no-undef
        console.log(luckysheet);
        // eslint-disable-next-line no-undef
        luckysheet.create(options);
      } else { console.error("luckysheet 没有正确加载!"); }
    }
  }
};
</script>

看到有大佬说需要在html页面中引入，于是在自己项目的index.html里进行了引入果然可以了

TypeError: luckysheet.create is not a function · Issue #8 · dream-num/luckysheet-vue · GitHub

之后想着改成本地导入，但是把dist文件夹内容放在项目的src中相对路径设置正确不能被成功加载，把dist文件夹整体放在index.html所在的public目录里就可以了，怀疑是不能访问上级目录（只是怀疑，没有测试）

  <!-- <link rel='stylesheet' href='luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='luckysheet/dist/assets/iconfont/iconfont.css' /> 
<script src="luckysheet/dist/plugins/js/plugin.js"></script>
<script src="luckysheet/dist/luckysheet.umd.js"></script> -->

<link rel='stylesheet' href='luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='luckysheet/dist/assets/iconfont/iconfont.css' /> 
<script src="luckysheet/dist/plugins/js/plugin.js"></script>
<script src="luckysheet/dist/luckysheet.umd.js"></script>

改了之后发现第一次可以，刷新之后就还是报错，在路径前加上/就可以了

  <!-- <link rel='stylesheet' href='luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='luckysheet/dist/assets/iconfont/iconfont.css' /> 
<script src="luckysheet/dist/plugins/js/plugin.js"></script>
<script src="luckysheet/dist/luckysheet.umd.js"></script> -->

<link rel='stylesheet' href='/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='/luckysheet/dist/assets/iconfont/iconfont.css' /> 
<script src="/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="/luckysheet/dist/luckysheet.umd.js"></script>

效果如下

关于后端

必须要有loadUrl接口，用于加载表格数据，前端也可以不用这个参数自己写函数，只不过肯定前端解析数据的没有人家专业，所以最好是用这个参数，只修改后端，只不过有个问题就是他的这个接口只用了简单的ajax进行post请求，没有携带很多参数，和自己的前端框架集成的时候会比较困难，目前正在想办法，先使用了一个解决办法就是利用前端的按钮做权限控制，后端的接口就按照标准的写，这样就不用动框架的核心代码了。

协同编辑需要allowUpdate和updateUrl参数，后端需要使用websocket接口，由于没有相关经验就先不写协同编辑了，但是写了一个丐版的，仅供参考，当用户点击保存时从后端返回上一个编辑的用户(存数据库)，如果不是同一个人则提示用户是否覆盖更新，虽然没有协同编辑但是也可以多用户编辑了。(补充：由于还是需要所以写了协同编辑功能，看下边↓)