Luckysheet类似excel的在线表格(vue)

参考文档:快速上手 | Luckysheet文档

一、引入

在vue项目的public文件夹下的index.html的<head>标签里面引入

html 复制代码
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

二、页面应用

2.1、视图中定义一个容器

html 复制代码
<template>
  <div>
    <div @click="DateShow">Excel在线编辑</div>
    <div
      id="luckysheetContainer"
      style="margin: 0px; padding: 0px; width: 60%; height: 80vh"
    ></div>
  </div>
</template>

2.2、初始化容器

javascript 复制代码
  mounted() {
    let dataS;
    dataS = [
      [
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "节次",
          v: "节次",
          id: "111",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: " 开始时间",
          v: " 开始时间",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: " 结束时间",
          v: " 结束时间",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "星期一",
          v: "星期一",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "星期二",
          v: "星期二",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "星期三",
          v: "星期三",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "星期四",
          v: "星期四",
        },
      ],
      [
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "1",
          v: "1",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "12:00",
          v: "12:00",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "14:00",
          v: "14:00",
        },
      ],
      [
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "2",
          v: "2",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "15:00",
          v: "15:00",
        },
        {
          ct: {
            fa: "General",
            t: "g",
          },
          m: "18:00",
          v: "18:00",
        },
      ],
    ];
    // 获取容器元素
    // const container = document.getElementById("luckysheetContainer");
    // console.log("container", container);
    // 将数据渲染到LuckySheet表格
    window.luckysheet.create({
      container: "luckysheetContainer", // DOM容器的ID
      title: "电子表格", // 工作簿名称
      lang: "zh", // 设定表格的语言
      // showtoolbarConfig: {
      //   print: false, // 工具栏隐藏打印按钮
      // },
      // showsheetbarConfig: {
      //   add: false, // 底部sheet页隐藏新增sheet按钮
      //   menu: false, // 底部sheet页隐藏管理按钮
      // },
      // sheetRightClickConfig: {
      //   hide: false, // 隐藏,取消隐藏
      //   move: false, // 向左移,向右移
      // },
    });
    this.sheetfile = window.luckysheet.getluckysheetfile();
    this.sheetfile[0].data = dataS;
    console.log(dataS, "this.sheetfile", this.sheetfile);
  },

可以自行编辑数据,也可以将数据渲染上去进行展示与二次编辑

2.3、效果展示

2.4、数据处理

javascript 复制代码
    DateShow() {
      this.sheetfile = window.luckysheet.getluckysheetfile();
      console.log("this.sheetfile", this.sheetfile);
const filteredArr = this.sheetfile[0].data.filter((row) =>
     row.some((cell) => cell !== null)
     );
     const filteredArr2 = filteredArr.map((row) =>
     row.filter((cell) => cell !== null)
      );
console.log("value", filteredArr2);
    },

上面的"filteredArr2"可以拿到表格中不为null的数据,后续其他功能可以在文档里查找。

相关推荐
Mike_jia1 小时前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
小钱c71 小时前
Python使用 pandas操作Excel文件并新增列数据
python·excel·pandas
Southern Wind1 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao2 小时前
Rspack 原理:webpack,我为什么不要你
前端
yinuo2 小时前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽2 小时前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户98402276679182 小时前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔2 小时前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖2 小时前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮2 小时前
从0到1搭一个monorepo项目(一)
前端·javascript·git