Vue+LuckSheet 前端应用在线报表
2021-09-23 本文已影响0人
林玲玲的笔记
LuckSheet官方链接：https://gitee.com/mengshukeji/Luckysheet
步骤：
1.新建一个html文件，页面引入lucksheet的js与样式
<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.指定一个容器
<div ref="reportDes" style="margin-top:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;" />
3.创建表格(可编辑)
props: {
ops: {
default: function () {
return {
title: "",
data:[]
}
}
}
},
data:function(){
return{
optionSheet:''
}
},
mounted:function () {
this.init();
},
methods: {
init:function(){
var _that = this;
this.optionSheet = {
container:_that.$el.id, //luckysheet为容器id
lang: 'zh', //中文
title: '源恒报表设计器', //表 头名
index:'0', //工作表索引
status:'1',//激活状态
order:'0', //工作表的顺序
hide:'0', //是否隐藏
column: 10,//列数
row: 30, //行数
color:'red',
showtoolbar: true,//是否显示工具栏
showinfobar: true,//是否显示顶部信息栏
showsheetbar: false,//是否显示底部sheet按钮
allowEdit: true,//是否允许前端编辑
functionButton: (function () {
var temp = new YHCore().getFunctionTemplate(templateButton);
return temp;
})(),
cellRightClickConfig: {//自定义配置单元右键菜单
copy: true, // 复制
copyAs: true, // 复制为
paste: true, // 粘贴
insertRow: true, // 插入行insert row
insertColumn: true, // 插入列insert column
deleteRow: true, // 删除选中行的数据 delete the selected row
deleteColumn: true, // 删除选中列的数据delete the selected column
deleteCell: false, // delete cell
hideRow: true, // hide the selected row and display the selected row
hideColumn: true, // hide the selected column and display the selected column
rowHeight: true, // 设置行高
columnWidth: true, // 设置行宽
clear: true, // 清空选定内容clear content
matrix: false, //矩阵 matrix operation selection
sort: false, // 排序sort selection
filter: false, //筛选 filter selection
chart: false, //图表生成 chart generation
image: false, //插入图片 insert picture
link: false, // 插入连接，比如网址之类insert link
data: false, //数据校验 data verification
cellFormat: false //设置单元格格式，锁定单元格格式，隐藏公示等 Set cell format
},
};
luckysheet.create(_that.optionSheet);
function text() {
console.log(123)
}
},
/**
* 点击获取表格中的json数据，用于存放数据库
*/
/*
getData:function (){
console.log(45456);
let sheetfile = luckysheet.getLuckysheetfile();//获取第一个表格的数据
sheetfile[0].celldata = luckysheet.transToCellData(sheetfile[0].data); //转换数据格式，存储表格数据，便于详情展示
this.ops.data = sheetfile[0].celldata;
this.$emit('evs', {
eventName: "getOnJson",
arguments:{
jsonData:this.ops.data
}
});
}
*/
},
4.不可编辑表格中optionSheet 值的不同配置
props: {
ops: {
default: function () {
return {
title: "",
data:[{
celldata: [
{
"r": 0,
"c": 0,
"v": {
"v": "部门：",
"ct": { "fa": "General", "t": "g" },
"bg": null,
"bl": 0,
"it": 0,
"ff": 1,
"fs": "11",
"ht": 1,
"vt": 1,
"m": "部门："
}
},
{
"r": 0,
"c": 1,
"v": {
"v": "dep",
"ct": { "fa": "General", "t": "g" },
"m": "dep"
}
},
{
"r": 1,
"c": 0,
"v": {
"v": "姓名：",
"ct": { "fa": "General", "t": "g" },
"m": "姓名："
}
},
{
"r": 1,
"c": 1,
"v": {
"v": "name",
"ct": { "fa": "General", "t": "g" },
"m": "name"
}
}
],
}]
}
}
}
},
data:function(){
return{
optionSheet:''
}
},
mounted:function () {
this.init()
},
methods: {
init:function(){
this.optionSheet = {
container:this.$el.id, //luckysheet为容器id
lang: 'zh', //中文,英文为"en"
allowCopy: false, // 是否允许拷贝
showtoolbar: false, // 是否显示工具栏
showinfobar: false, // 是否显示顶部信息栏
showsheetbar: false, // 是否显示底部sheet页按钮
showstatisticBar: false, // 是否显示底部计数栏
sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
allowEdit: false, // 是否允许前台编辑
enableAddRow: false, // 允许增加行
enableAddCol: false, // 允许增加列
userInfo: false, // 右上角的用户信息展示样式
showRowBar: false, // 是否显示行号区域
showColumnBar: false, // 是否显示列号区域
sheetFormulaBar: false, // 是否显示公式栏
enableAddBackTop: false,//返回头部按钮
rowHeaderWidth: 0,//纵坐标
columnHeaderHeight: 0,//横坐标
showstatisticBarConfig: {
count:false,
view:false,
zoom:false,
},
showsheetbarConfig: {
add: false, //新增sheet
menu: false, //sheet管理菜单
sheet: false, //sheet页显示
},
data: this.ops.data
};
luckysheet.create(this.optionSheet);
},
},
