2024年最全VUE 之 Jspreadsheet CE电子表格的使用步骤，揭秘ARouter路由机制-CSDN博客

本文链接：https://blog.csdn.net/2401_84617080/article/details/138518412

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

或
npm install jspreadsheet-ce


组件引入

import jexcel from ‘jexcel’
import ‘jexcel/dist/jexcel.css’
或
import jexcel from ‘jspreadsheet-ce’
import ‘jspreadsheet-ce/dist/jexcel.css’


定义容器

配置列：


定义配置项

data() {
return {
options: {
data: Arr,
allowToolbar: false,
minDimensions: [10, 30],
tableOverflow: true,
// lazyLoading: true,
tableWidth: ‘1678px’,
tableHeight: ‘560px’,
freezeColumns: 3,
columns: [
{ type: ‘text’, title: ‘xx（mm）’, width: ‘150px’ },
{ type: ‘text’, title: ‘xx（mm）’, width: ‘150px’ },
{ type: ‘hidden’, title: ‘xx（mm）’, width: ‘150px’ },
{ type: ‘hidden’, title: ‘xx（mm）’, width: ‘150px’ },
{ type: ‘text’, title: ‘xx（片）’, width: ‘150px’ },
{ type: ‘text’, title: ‘xx（元/㎡）’, width: ‘150px’ },
{ type: ‘text’, title: ‘xx’, width: ‘150px’ },
{ type: ‘text’, title: ‘xx’, width: ‘170px’ },
{ type: ‘text’, title: ‘xx’, width: ‘150px’ },
{ type: ‘text’, title: ‘xx’, width: ‘150px’ },
{ type: ‘text’, title: ‘xx（㎡）’, width: ‘150px’ },
{ type: ‘text’, title: ‘xx（㎡）’, width: ‘150px’ }
],
// rowResize: true,
// columnDrag: true,
// allowComments: true,
contextMenu: function(obj, x, y, e) {
console.log(----, obj.options)
var items = []

      if (y == null) {
      } else {
        // Insert new row
        if (obj.options.allowInsertRow == true) {
          items.push({
            title: '在此前插入行',
            onclick: function() {
              obj.insertRow(1, parseInt(y), 1)
            }
          })

          items.push({
            title: '在此后插入行',
            onclick: function() {
              obj.insertRow(1, parseInt(y))
            }
          })
        }

        if (obj.options.allowDeleteRow == true) {
          items.push({
            title: '删除选中行',
            onclick: function() {
              obj.deleteRow(obj.getSelectedRows().length ? undefined : parseInt(y))