VUE 之 Jspreadsheet CE电子表格的使用步骤

2401_84435152

已于 2024-04-29 03:31:26 修改

阅读量346

点赞数 5

分类专栏：程序员文章标签： vue.js javascript 前端

于 2024-04-29 03:31:25 首次发布

本文链接：https://blog.csdn.net/2401_84435152/article/details/138297949

版权

程序员专栏收录该内容

163 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JspreadsheetCE创建一个功能强大的web版Excel表格，展示了其API和配置选项，并指出学习过程中可能遇到的JavaScript和ES6知识点挑战，推荐了一份精简的前端核心知识学习资源。

摘要由CSDN通过智能技术生成

    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))
            }
          })
        }
      }
      // Line
      items.push({ type: 'line' })
      // About
      if (obj.options.about) {
        items.push({
          title: '关于',
          onclick: function() {
            alert(obj.options.about)
          }
        })
      }

      return items
    }
  }

}
}


js实例化表格并渲染之容器中

mounted() {
const spreadsheet = jexcel(this.$refs.spreadsheet, options)
Object.assign(this, { spreadsheet })
spreadsheet.refresh()
}


来看效果：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2ff4e3cc73e74cf08610f8e0f67ab507.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6LWr5YW5L0hlcnp6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


此表格就是web版excel功能非常强大且变态，感兴趣的可以尝试一下；  
 官方api[Jspreadsheet CE](https://bbs.csdn.net/topics/618166371)  
 ps：全英文的，慎入


### JavaScript 和 ES6



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**