Spreadjs表格
2024-04-15 11:05:51
1.安装
https://www.npmjs.com/package/@grapecity/spread-sheets
2.代码
把主要文件放在了组件中
子组件
<template><div class="spreadcontainer"><gc-spread-sheets class="spread-host" @workbookInitialized="workbookInitialized"><gc-worksheet :dataSource="dataSource" :autoGenerateColumns="autoGenerateColumns"><gc-column :dataField="' '" :width="80"></gc-column><gc-column :dataField="'项目代号'" :width="160"></gc-column><gc-column :dataField="'编号'" :width="170"></gc-column><gc-column :dataField="'名称、型号、规格'" :width="190"></gc-column><gc-column :dataField="'数量'" :width="110"></gc-column><gc-column :dataField="'备注'" :width="180"></gc-column></gc-worksheet></gc-spread-sheets></div>
</template><script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import "@grapecity/spread-sheets-vue/dist/gc.spread.sheets.vue.min.js"
import * as GC from "@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"
import "@grapecity/spread-sheets-resources-zh"
GC.Spread.Common.CultureManager.culture("zh-cn")export default {name: "HelloWorld",data() {return {autoGenerateColumns: false,spread: null,col: ["项目代号", "编号", "名称、型号、规格", "数量", "备注"]}},props: ["dataSource", "status"],methods: {workbookInitialized(spread) {this.spread = spreadlet that = this// 编辑的编号回车传递spread.bind(GC.Spread.Sheets.Events.EditChange, function(sender, args) {that.$parent.$parent.edittext(args.editingText)})// 输入完成切换单元格触发spread.bind(GC.Spread.Sheets.Events.CellChanged, function(e, info) {if (info.sheetArea === GC.Spread.Sheets.SheetArea.viewport) {that.$parent.$parent.quiteedit()}})// 点击的单元格spread.bind(GC.Spread.Sheets.Events.CellClick, function(sender, args) {that.$parent.$parent.clickposition(args.row, args.col)})// 点击插入行或者删除行重新渲染数据（为了页数可以展示）spread.bind(GC.Spread.Sheets.Events.RowChanged, function(e, info) {console.log(info)if (info.propertyName === "addRows" || info.propertyName === "deleteRows") {that.$parent.$parent.addpagenum()console.log(that)}})// 单元格失去焦点清除// 去除sheet页spread.options.tabStripVisible = falsespread.invalidateLayout()spread.repaint()// 表单保护let sheet = spread.getActiveSheet()sheet.getRange(-1, 3, -1, 1, GC.Spread.Sheets.SheetArea.viewport).wordWrap(true)var defaultStyle = new GC.Spread.Sheets.Style()defaultStyle.locked = falsesheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport)var style = new GC.Spread.Sheets.Style()style.locked = truesheet.setStyle(-1, 0, style)let option = {allowSelectLockedCells: true,allowSelectUnlockedCells: true,allowFilter: false,allowSort: false,allowResizeRows: true,allowResizeColumns: false,allowEditObjects: false,allowDragInsertRows: false,allowDragInsertColumns: false,allowInsertRows: false,allowInsertColumns: false,allowDeleteRows: false,allowDeleteColumns: false}sheet.options.protectionOptions = optionsheet.options.isProtected = true// 删除回车键切换单元格的操作spread.commandManager().setShortcutKey(undefined, GC.Spread.Commands.Key.enter, false, false, false, false)// 注册键盘回车事件spread.commandManager().register("myCmd",function ColorAction() {//单击一个单元格，然后按Enter键。that.$parent.$parent.getdlbdata()},13)// 对右键的菜单栏更改var menuData = spread.contextMenu.menuDataconsole.log(menuData)var newMenuData = []menuData.forEach(function(item) {if (item) {if (item.text === "全部粘贴") {item.text = "粘贴"}if (item.name === "gc.spread.copy" || item.name === "gc.spread.cut" || item.name === "gc.spread.pasteAll") {item.workArea = "viewportrowHeaderslicercorner"}if (item.name === "gc.spread.copy" || item.name === "gc.spread.cut" || item.name === "gc.spread.clearContents" || item.name === "gc.spread.pasteAll") {item.workArea = "viewportslicercorner"}if (item.name === "gc.spread.filter" ||item.name === "gc.spread.sort" ||item.workArea === "colHeader" ||item.workArea === "sheetTab" ||!item.name ||item.workArea === "viewportcorner" ||item.workArea === "slicer" ||item.name === "gc.spread.pasteOptions" ||item.name === "gc.spread.pasteFormula" ||item.name === "gc.spread.pasteValues" ||item.name === "gc.spread.pasteFormatting" ||item.name === "gc.spread.hideRows" ||item.name === "gc.spread.unhideRows") {return}newMenuData.push(item)}})spread.contextMenu.menuData = newMenuDataconsole.log(spread.contextMenu.menuData)}}
}
</script><style lang="scss" scoped>
.spreadcontainer {height: 100%;width: 100%;.spread-host {height: 100%;width: 100%;/deep/ table {tr {td {.gc-scroll-container {.gc-scrollbar-wrapper {left: 0;}.gc-scroll-arrow {left: 0;}}}}}}
}
</style>父组件
<!--* @Author: wangn* @Date: 2020-06-10 13:51:21* @LastEditors: wangn* @Description:
-->
<template><div id="listcontainer"><div class="searchbox"><div class="picnum"><span>图号</span><input type="text" v-model="PicNum" /></div><div class="name"><span>名称</span><input type="text" v-model="Name" /></div></div><div class="btns"><p @click="filterevent">查询</p><p @click="restart">重置</p></div><div class="curd"><p @click="add"><i class="el-icon-plus"></i><span>新增</span></p><p @click="quote"><i class="el-icon-plus"></i><span>引用</span></p><p @click="change"><i class="el-icon-edit"></i><span>修改</span></p><p @click="del"><i class="el-icon-minus"></i><span>删除</span></p><p @click="outfile"><i class="el-icon-download"></i><span>导出</span></p><p @click="showuploadbox"><i class="el-icon-upload2"></i><span>导入</span></p></div><div class="tablebox"><table border="0" cellspacing="0"><thead><tr><th></th><th @click="allchosebtn"><input type="checkbox" :checked="chosearr.length === nowpageleng" /></th><th>操作</th><th>图号</th><th>名称</th><th>创建者</th><th>创建时间</th><th>状态</th></tr></thead><tbody><tr v-for="(item, index) in tableData" :key="index" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }"><td>{{ (tablecurrentPage - 1) * tablepagesize + index + 1 }}</td><td @click="singlechose(item.id)"><input type="checkbox" :checked="chosearr.indexOf(item.id) !== -1" /></td><td class="look" title="查看" @click="lookdetail(item.id)"><i class="el-icon-view"></i></td><td>{{ item.dLBNumber }}</td><td>{{ item.dLBName }}</td><td>{{ item.firstFullName }}</td><td>{{ item.createTime }}</td><td>{{ item.dLBState }}</td></tr></tbody></table></div><div class="paginate"><el-paginationbackground@size-change="changetablelang"@current-change="changetablepage":current-page="tablecurrentPage":page-sizes="[10, 20, 30]":page-size="tablepagesize"prev-text="< 上一页 "next-text=" 下一页 >"layout="total, sizes, prev, pager, next, jumper":total="tabletotal"></el-pagination></div><el-dialog title="新增" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" :close-on-click-modal="false"><div class="dialogmain"><div class="tabletop"><p class="basisinfo">基础信息</p><div class="info"><div class="picnum"><span>图号</span><i v-if="status !== '查看'">*</i><input type="text" :disabled="status == '查看'" v-model="DLBNumber" /></div><div class="name"><span>名称</span><i v-if="status !== '查看'">*</i><input type="text" :disabled="status == '查看'" v-model="DLBName" /></div><div><p @click="fromdlb" v-if="status !== '查看'">从DLB中选择数据</p></div></div><p>元件目录表</p></div><div class="dialogtable"><spread ref="spread" :dataSource="dataSource" :status="status" /><!-- <table border="0" cellspacing="0"><thead><tr><th></th><th></th><th>项目代号</th><th>编号</th><th>名称、型号、规格</th><th>数量</th><th>备注</th></tr></thead><tbody><tr v-for="(item, index) in dialogData" :key="index" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }"><td>{{ (dialogcurrentPage - 1) * 33 + index + 1 }}</td><td class="look" title="查看" @click="jumpdlb(index)"><span v-if="status !== '查看'">搜索</span></td><td><input type="text" v-model="item.projectNumber" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td><td><input type="text" v-model="item.itemNumber" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td><td><input type="text" v-model="item.itemName" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td><td><input type="text" v-model="item.itemQuantity" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td><td><input type="text" v-model="item.remarks" :style="{ background: index % 2 == 0 ? '' : '#eeeeee' }" :disabled="!canedit" /></td></tr></tbody></table> --></div><!-- <div class="paginate"><el-paginationbackground@current-change="changedialogpage":current-page="dialogcurrentPage":page-sizes="[33]":page-size="dialogpagesize"prev-text="< 上一页 "next-text=" 下一页 >"layout="total, sizes, prev, pager, next, jumper":total="dialogtotal"></el-pagination></div> --></div><span slot="footer" class="dialog-footer"><!-- <el-button type="primary" @click="addnewpage" v-if="status !== '查看'">新增一页</el-button> --><!-- <el-button type="primary" @click="delpage" v-if="status !== '查看'">删除本页</el-button> --><el-button type="primary" @click="submit" v-if="status !== '查看'">提交</el-button><el-button @click="closedialog">取消</el-button></span></el-dialog><el-dialog title="dlb" :visible.sync="showdlb" width="80%" :before-close="handleClosedlb" class="dlbpage" :close-on-click-modal="false"><dlb /></el-dialog><el-dialog title="文件上传" :visible.sync="uploadbox" width="20%" :before-close="handleCloseuploadbox" class="upload"><input type="file" id="file" @change="importfile($event)" /><button @click="uploadevent">确认上传</button></el-dialog></div>
</template>
<script>
import spread from "../../../../components/spread"
import dlb from "../dlb/index"
import { datagrid, findOneById, saveDLBItemData, checkDLBDatas, delByIds, doExportDatas, doImportExcel, lookshoucang, findByMaterId } from "../../../../api/index"
export default {components: {spread,dlb},data() {return {PicNum: "",Name: "",localPicNum: "",localName: "",tablecurrentPage: 1,tablepagesize: 10,dialogcurrentPage: 1,dialogpagesize: 10,tabletotal: 0,dialogtotal: 0,dialogVisible: false,tableData: [],dialogData: [],canedit: true,status: "",chosearr: [],dlbshow: false,DLBNumber: "",DLBName: "",id: "",alladdData: [],nowpageleng: 10,uploadbox: false,formData: {},menushow: false,dlbindex: 0,showdlb: false,dlbsrc: "",dataSource: [],position: 0,positioncol: 0,editingText: ""}},methods: {// // 鼠标右击// showmenuevent(e, item, index) {// // console.log(index)// // console.log((this.dialogcurrentPage - 1) * 33 + index)// if (this.status !== "查看") {// this.menuTop = e.clientY + "px"// this.menuLeft = e.clientX + "px"// this.menushow = true// this.readydata = item// this.pasteindex = index// }// },// copy() {// console.log("复制")// console.log(this.pasteindex)// console.log((this.dialogcurrentPage - 1) * 33 + this.pasteindex)// },// paste() {// console.log("粘贴")// console.log(this.pasteindex)// },fromdlb() {// 从dlb中获取数据后，调取子组件中的方法，将获取的数据传入子组件this.jumpdlb()console.log(111)},handleClose(done) {done()this.canedit = truethis.status = ""this.DLBNumber = ""this.DLBName = ""},handleCloseuploadbox(done) {done()},handleClosedlb(done) {done()},closedialog() {this.dialogVisible = falsethis.canedit = truethis.status = ""this.DLBNumber = ""this.DLBName = ""},changelang(val) {console.log(val)},changepage(val) {console.log(val)},getdialogevent() {console.log(this.dialogData)},// table的分页changetablelang(val) {this.chosearr = []this.tablepagesize = valthis.tablecurrentPage = 1this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)},changetablepage(val) {this.chosearr = []this.tablecurrentPage = valthis.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)},lookdetail(id) {this.status = "查看"this.canedit = falsethis.dialogVisible = truethis.id = id// 获取查看数据this.getdialogData(this.id)},// 查看dialogDatagetdialogData(id) {findOneById(id).then(res => {console.log(res)if (res.data.obj) {this.dataSource = res.data.obj.dlbItemListthis.DLBNumber = res.data.obj.dlbInfo.DLBNumberthis.DLBName = res.data.obj.dlbInfo.DLBName}})},// 获取tableDatagettableData(PicNum, Name, page, rows) {datagrid(PicNum, Name, page, rows).then(res => {if (res.data) {this.tableData = res.data.rowsthis.nowpageleng = res.data.rows.lengththis.tabletotal = res.data.total}})},filterevent() {this.localPicNum = this.PicNumthis.localName = this.Namethis.tablepagesize = 10this.tablecurrentPage = 1this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)},restart() {this.PicNum = ""this.Name = ""this.localPicNum = this.PicNumthis.localName = this.Namethis.tablepagesize = 10this.tablecurrentPage = 1this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)},allchosebtn() {if (this.chosearr.length == this.nowpageleng) {this.chosearr = []} else {this.chosearr = []for (let i = 0; i < this.tableData.length; i++) {this.chosearr.push(this.tableData[i].id)}}},singlechose(id) {if (this.chosearr.indexOf(id) == -1) {this.chosearr.push(id)} else {this.chosearr.splice(this.chosearr.indexOf(id), 1)}},jumpdlb() {console.log("跳到DLB")this.showdlb = trueconsole.log(process.env.NODE_ENV)if (process.env.NODE_ENV === "development") {this.dlbsrc = "http://localhost:8888/#/dlb"} else {this.dlbsrc = "webpage/com/glaway/ims/dist/index.html#/dlb"}},buildblankform() {// 新增的时候先提前创建一个空白的表格for (let i = 0; i < 100; i++) {this.dataSource[i] = {" ": "",行号: i + 1,项目代号: "", //项目代号编号: "", //编号"名称、型号、规格": "", //名称数量: "", //数量备注: "" //备注}if (i % 33 == 0) {this.dataSource[i][" "] = "第" + Math.ceil(i / 33 + 1) + "页"}}},addpagenum() {for (let i = 0; i < this.dataSource.length; i++) {if (i % 33 == 0) {this.dataSource[i][" "] = "第" + Math.ceil(i / 33 + 1) + "页"} else {this.dataSource[i][" "] = ""}}},add() {this.id = ""console.log("新增")this.DLBName = ""this.DLBNumber = ""this.canedit = truethis.dialogVisible = truethis.dataSource = []this.buildblankform()},adddlbdata(addData) {// 关闭adddlb窗口this.showdlb = false// 得到数据// 更具position位置更改this.dataSourcelet newArray = this.dataSource.slice(0, this.dataSource.length)newArray[this.position]["编号"] = addData.codenewArray[this.position]["名称、型号、规格"] = addData.namenewArray[this.position]["项目代号"] = ""newArray[this.position]["数量"] = "1"newArray[this.position]["备注"] = ""this.dataSource = []this.dataSource = newArray},getdlbarr(dlbarr) {console.log(this.position)// 关闭adddlb窗口this.showdlb = false// 得到数据// 更具position位置更改this.dataSourcelet newArray = this.dataSource.slice(0, this.dataSource.length)for (let i = 0; i < dlbarr.length; i++) {newArray[this.position + i]["编号"] = dlbarr[i].CODEnewArray[this.position + i]["名称、型号、规格"] = dlbarr[i].BASISFORMATIONNAMEnewArray[this.position + i]["项目代号"] = ""newArray[this.position + i]["数量"] = dlbarr[i].COUNTnewArray[this.position + i]["备注"] = ""}this.dataSource = []this.dataSource = newArray},getdlbdata() {console.log(this.position)console.log(this.editingText)if (this.positioncol == 2) {if (this.editingText !== "") {findByMaterId(this.editingText).then(res => {if (res.data.obj.length > 0) {let newArray = this.dataSource.slice(0, this.dataSource.length)newArray[this.position]["编号"] = res.data.obj[0].ITEMNUMBERnewArray[this.position]["名称、型号、规格"] = res.data.obj[0].ITEMNAMEnewArray[this.position]["项目代号"] = ""newArray[this.position]["数量"] = "1"newArray[this.position]["备注"] = ""this.dataSource = []this.dataSource = newArray}})}}},edittext(editingText) {this.editingText = editingText},quiteedit() {this.editingText = ""},addnewpage() {// 新增加一页console.log("新增一页")for (let i = 0; i < 33; i++) {this.alladdData.push({projectNumber: "", //项目代号itemNumber: "", //编号itemName: "", //名称itemQuantity: "", //数量remarks: "" //备注})}// 总数改变分页改变this.alladdDatatotal = this.alladdData.lengththis.dialogtotal = this.alladdDatatotalthis.dialogData = this.alladdData.slice((this.dialogcurrentPage - 1) * 33, this.dialogcurrentPage * 33)console.log(this.alladdData)console.log(this.dialogData)},delpage() {// 删除操作if (this.dialogcurrentPage == 1) {if (this.alladdDatatotal > 33) {this.alladdData = this.alladdData.slice(33)this.alladdDatatotal = this.alladdDatatotal - 33this.dialogtotal = this.alladdDatatotalthis.dialogData = this.alladdData.slice((this.dialogcurrentPage - 1) * 33, this.dialogcurrentPage * 33)} else {this.$message({message: "只剩一页了，不能删了",type: "warning"})}} else {this.alladdData.splice((this.dialogcurrentPage - 1) * 33, 33)this.alladdDatatotal = this.alladdDatatotal - 33this.dialogtotal = this.alladdDatatotalthis.dialogcurrentPage = this.dialogcurrentPage - 1this.dialogData = this.alladdData.slice((this.dialogcurrentPage - 1) * 33, this.dialogcurrentPage * 33)}console.log(this.alladdData)console.log(this.dialogData)},clickposition(position, positioncol) {this.position = positionthis.positioncol = positioncol},submit() {if (this.DLBNumber == "" || this.DLBName == "") {this.$message({message: "图号或名称不能为空！",type: "warning"})return}// 增加或引用或更改时校验// 先判断有数据let result = []for (let i = this.dataSource.length - 1; i >= 0; i--) {if (this.dataSource[i]["项目代号"] !== "" ||this.dataSource[i]["编号"] !== "" ||this.dataSource[i]["名称、型号、规格"] !== "" ||this.dataSource[i]["数量"] !== "" ||this.dataSource[i]["备注"] !== "") {result.push(i)}}if (result.length === 0) {this.$message({message: "至少要有一条数据",type: "warning"})return}checkDLBDatas(this.DLBNumber, this.id).then(res => {if (res.data.msg !== "操作成功") {// 保存失败this.$message({message: "保存失败,图号不能与之前图号重复！",type: "warning"})} else {let pagenum = Math.ceil(this.dataSource.length / 33)for (let i = this.dataSource.length - 1; i >= 0; i--) {if (this.dataSource[i]["项目代号"] == "" &&this.dataSource[i]["编号"] == "" &&this.dataSource[i]["名称、型号、规格"] == "" &&this.dataSource[i]["数量"] == "" &&this.dataSource[i]["备注"] == "") {this.dataSource.splice(i, 1)}}console.log(this.dataSource)saveDLBItemData(this.DLBNumber, this.DLBName, JSON.stringify(this.dataSource), pagenum, this.id).then(res => {this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)this.dialogVisible = falsethis.DLBNumber = ""this.DLBName = ""})}})},quote() {this.id = ""// 引用只能引用单挑数据if (this.chosearr.length === 1) {console.log(this.chosearr)let id = this.chosearr[0]this.dialogcurrentPage = 1// 开始引用数据this.getdialogData(id)this.dialogVisible = true} else {this.$message({message: "能且只能引用一条数据",type: "warning"})}},change() {// 修改只能修改单挑数据if (this.chosearr.length === 1) {this.id = this.chosearr[0]let id = this.chosearr[0]this.dialogcurrentPage = 1// 开始引用数据this.getdialogData(id)this.dialogVisible = true} else {this.$message({message: "一次能且只能修改一条数据",type: "warning"})}},del() {let str = this.chosearr.join(",")delByIds(str).then(res => {if (this.tablecurrentPage == 1) {this.tablecurrentPage = 1} else {if (this.chosearr.length == this.nowpageleng) {this.tablecurrentPage = this.tablecurrentPage - 1}}this.chosearr = []// 判断如果删除的是最后一页this.gettableData(this.localPicNum, this.localName, this.tablecurrentPage, this.tablepagesize)})},outfile() {let suffix = ""if (this.chosearr.length > 1) {suffix = "zip"} else if (this.chosearr.length == 1) {suffix = "xlsx"} else {this.$message({message: "先选择要导出的数据",type: "warning"})return}let str = this.chosearr.join(",")doExportDatas(str).then(res => {if (window.navigator.msSaveOrOpenBlob) {// 兼容IE10const blob = res.datawindow.navigator.msSaveBlob(blob, "DLB报表." + suffix)} else {const blob = res.dataconst reader = new FileReader()reader.readAsDataURL(blob)reader.onload = e => {const a = document.createElement("a")a.download = decodeURIComponent("DLB报表." + suffix)a.href = e.target.resultdocument.body.appendChild(a)a.click()document.body.removeChild(a)}}})},importfile(e) {let file = e.target.files[0]this.formData = new FormData()this.formData.append("FileData", file)this.formData.append("Filename", file.name)this.formData.append("Upload", "Submit Query")},uploadevent() {if (this.formData.__proto__.append) {doImportExcel(this.formData).then(res => {// console.log(res)if (res.data.msg) {// 判断导入成功还是导入失败let str = res.data.msg.slice(0, 4)// console.log(str)if (str === "导入失败") {this.$message({message: "导入失败！",type: "warning"})} else {this.$message({message: "导入成功",type: "success"})this.uploadbox = false}}})} else {this.$message({message: "先选取需要导入的文件",type: "warning"})}},showuploadbox() {this.uploadbox = true}},mounted() {this.chosearr = []this.PicNum = ""this.Name = ""this.canedit = truethis.gettableData("", "", 1, 10)window.addEventListener("click", () => {this.menushow = false})}，watch: {dataSource: {deep: true,handler: function(newV) {// 先判断tablelength和newV.length的长度// 如果newV.length大于tablelength说明是进行了插入操作// 如果newV.length小于tablelength说明是进行了插入操作if (newV.length > this.tablelength) {console.log("插入行")// 表示插入了几行let lang = newV.length - this.tablelength// 判断插入的行数// console.log(Math.floor(lang / 33) + "页" + (lang - Math.floor(lang / 33) * 33) + "行")// 应该补充的行数为33-(lang - Math.floor(lang / 33) * 33)// console.log("应该再插入" + (33 - (lang - Math.floor(lang / 33) * 33)) + "行")if (33 - (lang - Math.floor(lang / 33) * 33) !== 33) {// console.log("再加" + (33 - (lang - Math.floor(lang / 33) * 33)) + "行")let newpage = []for (let i = 0; i < 33 - (lang - Math.floor(lang / 33) * 33); i++) {newpage[i] = {" ": "",行号: "",项目代号: "", //项目代号编号: "", //编号"名称、型号、规格": "", //名称数量: "", //数量备注: "" //备注}}newV = [...newV, ...newpage]}}if (newV.length < this.tablelength) {console.log("删除行")let lang = this.tablelength - newV.lengthif (Math.ceil(lang / 33) > 1) {console.log("表示删除的数量超过33")console.log("应该再插入" + (33 - (lang - Math.floor(lang / 33) * 33)) + "行")let newpage = []for (let i = 0; i < lang - Math.floor(lang / 33) * 33; i++) {newpage[i] = {" ": "",行号: "",项目代号: "", //项目代号编号: "", //编号"名称、型号、规格": "", //名称数量: "", //数量备注: "" //备注}}newV = [...newV, ...newpage]// 加上删除的数量} else if (lang === 33) {console.log("表示删除的数量等于33")// 不需要不加了} else {console.log("表示删除的数量小于33")// 加上删除的数量console.log("应该再插入" + (lang - Math.floor(lang / 33) * 33) + "行")let newpage = []for (let i = 0; i < lang - Math.floor(lang / 33) * 33; i++) {newpage[i] = {" ": "",行号: "",项目代号: "", //项目代号编号: "", //编号"名称、型号、规格": "", //名称数量: "", //数量备注: "" //备注}}newV = [...newV, ...newpage]}}// 遍历数组中的对象有没有所有属性for (let i = 0; i < newV.length; i++) {let objarr = []for (let j in newV[i]) {objarr.push(j)}if (objarr.indexOf(" ") == -1 ||objarr.indexOf("行号") == -1 ||objarr.indexOf("项目代号") == -1 ||objarr.indexOf("编号") == -1 ||objarr.indexOf("名称、型号、规格") == -1 ||objarr.indexOf("数量") == -1 ||objarr.indexOf("备注") == -1) {newV[i][" "] = ""newV[i]["行号"] = ""newV[i]["项目代号"] = ""newV[i]["编号"] = ""newV[i]["名称、型号、规格"] = ""newV[i]["数量"] = ""newV[i]["备注"] = ""}}// 现在的newV没有行数和页码要给加上for (let i = 0; i < newV.length; i++) {newV[i]["行号"] = i + 1if (i % 33 == 0) {newV[i][" "] = "第" + Math.ceil(i / 33 + 1) + "页"}}// 赋值// console.log(newV)this.dataSource = newV// // 操作完成之后将新的长度赋值给保存的长度this.tablelength = newV.length}}}
}
</script>
<style lang="scss" scoped>
#listcontainer {width: 100%;height: 100%;background-color: #fff;padding: 0 20px;box-sizing: border-box;display: flex;flex-direction: column;position: relative;.menu {// position: absolute;z-index: 99999;position: fixed;width: 150px;height: 60px;border: 1px solid #ccc;background-color: #fff;li {height: 30px;line-height: 30px;}li:hover {background-color: #108ee9;color: #fff;cursor: pointer;}}.searchbox {height: 50px;width: 100%;display: flex;justify-content: start;align-items: center;div {margin-right: 30px;overflow: hidden;display: flex;justify-content: space-between;span {margin-right: 10px;display: inline-block;}input {outline: none;height: 20px;line-height: 20px;}}}.btns {height: 50px;width: 100%;display: flex;justify-content: flex-end;p {height: 30px;line-height: 30px;width: 100px;background-color: #0c60aa;cursor: pointer;color: #fff;margin-right: 30px;}p:hover {background-color: #108ee9;}}.curd {height: 30px;width: 100%;display: flex;p {height: 30px;line-height: 30px;width: 60px;margin-right: 10px;cursor: pointer;i {color: #108ee9;margin-right: 2px;}}}.tablebox {flex: 1;overflow-x: auto;margin-top: 10px;table {height: 100%;thead {height: 40px;width: 100%;overflow-y: scroll;display: block;tr {height: 40px;display: flex;background: #e5e5e5;th {width: 250px;line-height: 40px;border: 1px solid #ccc;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}th:nth-child(1) {width: 50px;}th:nth-child(2) {width: 50px;}th:nth-child(3) {width: 150px;}}}tbody {width: 100%;height: 400px;overflow-y: scroll;overflow-x: hidden;display: block;tr {display: flex;height: 40px;.look {cursor: pointer;}td {line-height: 40px;width: 250px;border: 1px solid #ccc;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;}td:nth-child(1) {width: 50px;}td:nth-child(2) {width: 50px;}td:nth-child(3) {width: 150px;}}}}}.paginate {height: 50px;width: 100%;margin-top: 10px;display: flex;justify-content: space-between;.el-pagination {button {padding: 0 10px;}.el-pager {.active {background-color: #0c60aa;}}}}/deep/ .el-dialog__wrapper {.el-dialog {height: 70%;overflow: hidden;.el-dialog__header {height: 30px;width: 100%;padding: 0 10px;.el-dialog__title {float: left;font-weight: 600;font-size: 14px;}.el-dialog__headerbtn {right: 7px;top: 7px;}}.el-dialog__body {height: calc(100% - 150px);width: 100%;padding: 0;.dialogmain {height: 100%;width: 100%;padding: 0 10px;box-sizing: border-box;.tabletop {height: 100px;width: 100%;p {text-align: left;height: 30px;line-height: 30px;color: #0c60aa;font-weight: 600;}.info {height: 40px;width: 100%;display: flex;justify-content: start;align-items: center;div {margin-right: 30px;overflow: hidden;display: flex;justify-content: space-between;span {display: inline-block;}i {color: red;}input {margin-left: 10px;outline: none;height: 20px;line-height: 20px;}p {height: 30px;background-color: #0c60aa;color: #fff;padding: 0 10px;}p:hover {cursor: pointer;background-color: #108ee9;}}}}.dialogtable {height: calc(100% - 100px);width: 100%;overflow: hidden;table {thead {height: 35px;width: 100%;tr {height: 35px;display: flex;background: #e5e5e5;th {width: 200px;line-height: 35px;border: 1px solid #ccc;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;box-sizing: border-box;}th:nth-child(1) {width: 50px;}th:nth-child(2) {width: 50px;}th:nth-child(3) {width: 150px;}th:nth-last-child(1) {width: 100px;}th:nth-last-child(2) {width: 100px;}}}tbody {height: 350px;overflow: auto;display: block;.spread-host {width: 100%;height: 100%;}tr {display: flex;width: 100%;height: 35px;table-layout: fixed;position: relative;.look {cursor: pointer;}td {line-height: 35px;padding: 0;box-sizing: border-box;width: 200px;border: 1px solid #ccc;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;input {width: 100%;height: 100%;outline: none;border: none;text-align: center;padding: 0;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}}td:nth-child(1) {width: 50px;}td:nth-child(2) {width: 50px;}td:nth-child(3) {width: 150px;}td:nth-last-child(1) {width: 100px;}td:nth-last-child(2) {width: 100px;}}}::-webkit-scrollbar {width: 1px;}}}}}.el-dialog__footer {height: 50px;width: 100%;button {height: 30px;padding: 0 10px;}}}}/deep/ .upload {overflow: hidden;.el-dialog {height: 25%;overflow: hidden;.el-dialog__header {height: 30px;width: 100%;padding: 0 10px;.el-dialog__title {float: left;font-weight: 600;font-size: 14px;}.el-dialog__headerbtn {right: 7px;top: 7px;}}.el-dialog__body {height: calc(100% - 30px);width: 100%;position: relative;#file {border: 1px solid #ccc;outline: none;}button {position: absolute;right: 30px;bottom: 30px;}}}}/deep/ .dlbpage {overflow: hidden;.el-dialog {height: 80%;overflow: hidden;.el-dialog__header {height: 30px;width: 100%;padding: 0 10px;.el-dialog__title {float: left;font-weight: 600;font-size: 14px;}.el-dialog__headerbtn {right: 7px;top: 7px;}}.el-dialog__body {height: calc(100% - 30px);width: 100%;padding: 0;}}}
}
</style>可参考网址：
https://www.grapecity.com.cn/blogs/create-a-spreadjs-vue-project-in-3-minutes
https://www.npmjs.com/package/@grapecity/spread-sheets
https://demo.grapecity.com.cn/spreadjs/help/api/
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/#/samples
Spreadjs表格相关推荐
- 葡萄城 SpreadJS 表格控件 V11 产品白皮书
一. 关于葡萄城 葡萄城成立于 1980 年,是全球领先的集开发工具.商业智能解决方案.管理系统设计工具于 一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务. 葡萄城是微软公 ...
- SpreadJS表格中关于下拉框new GC.Spread.Sheets.CellTypes.ComboBox()的设置和使用
SpreadJS表格中关于下拉框的设置和使用 Spreadjs使我们经常用到的一种表格插件,下面是自己使用中的一点心得,希望对大家有帮助,废话不所说,下面进入正题: 1.npm下载 @grapecit ...
- SpreadJS 表格控件发布V11版本，新增图表及前端PDF导出！
日前,全球最大的控件提供商葡萄城宣布,SpreadJS 纯前端表格控件正式发布V11 版本.新版本亮点颇多,不但为用户带来期待已久的图表功能,还新增前端导出 PDF.列分组等功能,在数据可视化方面更进 ...
- 葡萄城SpreadJS表格控件荣获ldquo;2018年度优秀软件产品rdquo;称号
日前,中国软件行业协会权威发布"2018年优秀软件产品"名单,葡萄城SpreadJS 纯前端表格控件产品荣耀上榜,凭借其对Excel的高度兼容性和处理海量数据时的绝佳性能表现,获得 ...
- SpreadJS 表格控件相关基础知识
官方链接:https://www.grapecity.com.cn/developer/spreadjs 总结:https://www.amoqi.cn/blog/detail/44 帮助手册:htt ...
- SpreadJS 纯前端表格控件应用案例：在线问卷系统
由某软件公司研发的在线问卷系统,是一款通过收集网络信息,帮助问卷设计者和数据分析师们分析消费者线上行为特征和态度的系统平台,使用该系统可批量而精确地抽取目标网页中的任何数据及信息,快速实现实时的信息获 ...
- SpreadJS 纯前端表格控件应用案例：金融业数据智能分析平台
由北京海创研发的金融业数据智能分析平台,通过嵌入 SpreadJS,实现了基于Web的数据采集.自助式报表设计与浏览.灵活查询.自主分析和数据预测等功能,简洁.易用,有效解决了用户数据填报.查询和分析 ...
- SpreadJS 纯前端表格控件应用案例：畅捷通财务T-UFO报表
由畅捷通推出的财务T-UFO报表,是用友T+Cloud的两大功能模块之一,提供类Excel风格,用于制定个性化报表,并支持自定义取数,借助该报表,财务人员可按部门.个人.往来单位.存货.项目设置辅助核 ...
- SpreadJS企业表格技术实践三：财务预算一体化系统
SpreadJS v14.0正式版下载 预算一体化云平台智能预算以"收.支.管"为主线,从财政一体化视角,基于"四库",健全财力管理.中期财政规划.预算编审.预 ...
- SpreadJS 纯前端表格控件应用案例：铭天预算执行系统
由武汉铭天信息科技有限责任公司(简称:武汉铭天)为湖北省水利厅研发的"铭天预算执行系统",旨在建立统一集成的网上报销流程,实现局域网多点报销审核与预算控制,以此提高财务审核报销与预 ...
最新文章
- 如果你不曾失败，只因你从未尝试
- 自己动手制作chm格式开源文档
- Winform控件拖动
- 记一次 javax.xml.soap.SOAPException:
- mysql实践小结,【java_mysql】实践小结
- 基于Servlet的技术问答网站系统实现（附源码）
- call mysql_connect_Call to undefined function mysql_connect()
- maven私服的创建和使用
- 为什么BGP需要TCP三次握手？
- jmeter-01 JMeter HTTP测试的各元件功能演示示例
- Hazel for Mac(自动化清理)
- 推荐两份学习 Kotlin 和机器学习的资料
- Spider爬虫笔记[更新中...]
- 服务器系统分辨率调不了,win10系统分辨率调整显示灰色_网站服务器运行维护
- 常见荧光染料修饰多种基团及其激发和 发射波长数据一览数据
- Terminal Emulator for Android（安卓终端模拟器）的使用
- 用html写树干的形状,HTML5使用纯CSS3构建的树枝和树叶
- C++控制台清屏函数
- IT技术支持工程师岗位职责
- salt-stack部署