大佬,想知道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>
有大佬懂嘛