Luckysheet怎么在同一个界面创建两个实例?

新手上路,请多包涵

大佬,想知道Luckysheet怎么在同一个界面创建两个实例,两个luckysheet.create总会把第一个销毁,去创建第二个

// 第一个表格的配置
  const options1 = {
    container: 'oldcontainer', // 容器 ID
    data: [
      [{ v: 'Name' }, { v: 'Age' }, { v: 'Gender' }],
      [{ v: 'John Doe' }, { v: 30 }, { v: 'Male' }],
      [{ v: 'Jane Doe' }, { v: 25 }, { v: 'Female' }]
    ]
  }

  // 第二个表格的配置
  const options2 = {
    container: 'newcontainer', // 容器 ID
    data: [
      [{ v: 'Product' }, { v: 'Price' }, { v: 'Quantity' }],
      [{ v: 'Apple' }, { v: 1.2 }, { v: 10 }],
      [{ v: 'Banana' }, { v: 0.5 }, { v: 20 }]
    ]
  }

  // 在第一个容器中创建表格
  luckysheet.create(options1)
  setTimeout(() => {
    // 在第二个容器中创建表格
    luckysheet.create(options2)
  }, 3000)

完整代码

<script setup>
import LuckyExcel from 'luckyexcel'
import Cookies from 'js-cookie'
import axios from 'axios'
import { defineProps, ref } from 'vue'
import * as Luckysheet from 'luckysheet'
const newcontainer = ref(null)
const props = defineProps({
  flieName: String,
  src: String
})
const mytoken = Cookies.get('satoken')
const loadExcel = () => {
  const token = mytoken
  axios
    .get('http://192.168.1.202:8083/fileCheck/upload/admin/老数据.xlsx', {
      headers: { Token: token },
      responseType: 'blob',
      params: {
        // 参数
      }
    })
    .then((response) => {
      // 将获取到的文件对象传递给 uploadExcel 方法
      const file = new File([response.data], 'xxx.xlsx', { type: response.data.type })
      console.log(file)
      var files = []
      files.push(file)
      uploadExcel(files)
    })
    .catch((error) => {
      console.error('文件获取失败:', error)
    })
}
const uploadExcel = (files) => {
  // document.addEventListener('DOMContentLoaded', function () {
  // 第一个表格的配置
  const options1 = {
    container: 'oldcontainer', // 容器 ID
    data: [
      [{ v: 'Name' }, { v: 'Age' }, { v: 'Gender' }],
      [{ v: 'John Doe' }, { v: 30 }, { v: 'Male' }],
      [{ v: 'Jane Doe' }, { v: 25 }, { v: 'Female' }]
    ]
  }

  // 第二个表格的配置
  const options2 = {
    container: 'newcontainer', // 容器 ID
    data: [
      [{ v: 'Product' }, { v: 'Price' }, { v: 'Quantity' }],
      [{ v: 'Apple' }, { v: 1.2 }, { v: 10 }],
      [{ v: 'Banana' }, { v: 0.5 }, { v: 20 }]
    ]
  }

  // 在第一个容器中创建表格
  // luckysheet.create(options1)
  const luckysheet1 = new Luckysheet(options1)
  luckysheet1.init()
  setTimeout(() => {
    // 在第二个容器中创建表格
    // luckysheet.create(options2)
    const luckysheet2 = new Luckysheet(options2)
    luckysheet2.init()
  }, 3000)
  // })
  // luckysheet.create({
  //   title: 'xxx.xlsx',
  //   userInfo: '',
  //   lang: 'zh', // 设定表格语言
  //   gridKey: 'old',
  //   container: 'oldcontainer', // 设定DOM容器的id
  //   showtoolbar: false, // 是否显示工具栏
  //   showinfobar: false, // 是否显示顶部信息栏
  //   showstatisticBar: false, // 是否显示底部计数栏
  //   showstatisticBarConfig: false,
  //   sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
  //   allowEdit: false, // 是否允许前台编辑
  //   enableAddRow: false, // 是否允许增加行
  //   enableAddCol: false, // 是否允许增加列
  //   sheetFormulaBar: false, // 是否显示公式栏
  //   enableAddBackTop: false, // 返回头部按钮
  //   showsheetbar: true, // 是否显示底部sheet页按钮
  //   // 自定义配置底部sheet页按钮
  //   showsheetbarConfig: {
  //     add: false,
  //     menu: true
  //   }
  // })
  // setTimeout(() => {
  //   luckysheet.create({
  //     title: 'xxx.xlsx',
  //     userInfo: '',
  //     lang: 'zh', // 设定表格语言
  //     gridKey: 'new',
  //     container: 'newcontainer', // 设定DOM容器的id
  //     showtoolbar: false, // 是否显示工具栏
  //     showinfobar: false, // 是否显示顶部信息栏
  //     showstatisticBar: false, // 是否显示底部计数栏
  //     showstatisticBarConfig: false,
  //     sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
  //     allowEdit: false, // 是否允许前台编辑
  //     enableAddRow: false, // 是否允许增加行
  //     enableAddCol: false, // 是否允许增加列
  //     sheetFormulaBar: false, // 是否显示公式栏
  //     enableAddBackTop: false, // 返回头部按钮
  //     showsheetbar: true, // 是否显示底部sheet页按钮
  //     // 自定义配置底部sheet页按钮
  //     showsheetbarConfig: {
  //       add: false,
  //       menu: true
  //     }
  //   })
  // }, 3000)
}
loadExcel()
</script>

<template>
  <div style="position: relative; height: 50vh">
    <div
      id="oldcontainer"
      ref="oldcontainer"
      style="padding: 0px; position: absolute; width: 100%; left: 0px; top: 10px; bottom: 10px"
    ></div>
  </div>
  <div style="position: relative; height: 50vh">
    <div
      id="newcontainer"
      ref="newcontainer"
      style="padding: 0px; position: absolute; width: 100%; left: 0px; top: 10px; bottom: 10px"
    ></div>
  </div>
</template>

<style scoped lang="scss"></style>

有大佬懂嘛

阅读 651
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏