官网地址:https://handsontable.com/

1.实现效果

2.安装

import { HotTable } from '@handsontable/vue'
import Handsontable from 'handsontable'
 
3.页面引用
  1. <template>
  2. <hot-table
  3. ref="tableServer"
  4. :data="hotSettings.dataList" // excal中的数据源
  5. :context-menu="hotSettings.contextMenu" // 右击鼠标可进行的操作
  6. :col-headers="hotSettings.colHeaders" // 表格头部标题
  7. :start-rows="hotSettings.startRows" // 默认固定行数
  8. :start-cols="hotSettings.startCols" // 默认固定列数
  9. :row-headers="hotSettings.rowHeaders" // 默认显示表格行头部
  10. :row-heights="hotSettings.rowHeights" // 默认设置行高度
  11. :manual-row-resize="hotSettings.manualRowResize" //
  12. :manual-column-resize="hotSettings.manualColumnResize"
  13. :manual-row-move="hotSettings.manualRowMove"
  14. :columns="hotSettings.columns"
  15. :before-remove-row="hotSettings.beforeRemoveRow" // 删除行之前触发的事件
  16. :after-create-row="hotSettings.afterCreateRow" // 添加行后触发的事件 //一定要记住所有的事件、数值一定要绑定在标签上才可使用,只在jsdata中绑定是不可以的
  17. :after-change="hotSettings.afterChange" // 新增行,动态改变值触发的事件
  18. :id="`hotTableAll${$route.params.id}`"
  19. class="table_hot"
  20. license-key="non-commercial-and-evaluation"
  21. />
  22. </el-form-item>
  23. <el-button class="primary-button uploadButton"
  24. size="small"
  25. type="primary"
  26. icon="el-icon-upload"
  27. @click="uploadFile">导出</el-button>
  28. </template>
  1. <script>
  2. import addressProvince from '@/components/addressProvince'
  3. import { HotTable } from '@handsontable/vue'
  4. import Handsontable from 'handsontable'
  5. import { Message } from 'element-ui'
    import priceList from '@/utils/priceList.js'
  6.  
  7. // 如果excal中有值为空,可拦截
    const validatorList = (rule, value, callback) => {
  1. for (let i = 0; i < value.length; i++) {
  2. if (!value[i].region || !value[i].destination) {
  3. callback(new Error('请输入价格表中所有信息, 多余的可通过鼠标右击进行删除行'))
  4. return
  5. }
  6. }
  7. callback()
  8. }
  9. const riseWeightVal = function (value, callback) {
  10. if (/^\d+(?=\.{0,1}\d+$|$)/.test(value) || value === '') {
  11. callback(true)
  12. } else {
  13. Message.error({
  14. message: '请输入数字'
  15. })
  16. callback(false)
  17. }
  18. }
  19. export default {
  20. components: {
  21. addressProvince,
  22. HotTable
  23. },
  24. data() {
  25. return {
  26. addressList: [{
  27. area: []
  28. }],
  29. hotSettings: {
  30. dataList: [], //
  31. colHeaders: ['区域', '目的地', '首重 kg', '首重价格', '续重 kg', '续重价格'],
  32. startRows: 8,
  33. startCols: 6,
  34. rowHeaders: true,
  35. rowHeights: 40,
  36. manualRowResize: true,
  37. manualColumnResize: true,
  38. manualRowMove: true,
  39. customBorders: true,
  40. columns: [
          //data: dataList数组中对应的 键,readOnly: 只读, type: 属于什么类型 例:text, numeric, validator: 数据验证
  41. { data: 'region', readOnly: false, type: 'text' },
  42. { data: 'destination', readOnly: false, type: 'text' },
  43. { data: 'firstWeight', readOnly: false, validator: riseWeightVal, allowInvalid: false },
  44. { data: 'firstWeightPrice', readOnly: false, validator: riseWeightVal, allowInvalid: false },
  45. { data: 'riseWeight', readOnly: false, validator: riseWeightVal, allowInvalid: false },
  46. { data: 'riseWeightPrice', readOnly: false, validator: riseWeightVal, allowInvalid: false }
  47. ],
  48. beforeRemoveRow: this.beforeRemoveRowMe,
  49. afterCreateRow: this.afterCreateRowMe,
  50. afterChange: this.afterChangeMe,
  51. contextMenu: {
  52. items: {
  53. 'row_above': {
  54. name: '在此行上方插入行'
  55. },
  56. 'row_below': {
  57. name: '在此行下方插入行'
  58. },
  59. 'separator': Handsontable.plugins.ContextMenu.SEPARATOR,
  60. 'copy': {
  61. name: '复制'
  62. },
  63. 'undo': {
  64. name: '撤消'
  65. },
  66. 'separator1': Handsontable.plugins.ContextMenu.SEPARATOR,
  67. 'remove_row': {
  68. name: '删除行'
  69. },
  70. 'clear_column': {
  71. name: '删除列'
  72. },
  73. 'clear_custom': {
  74. name: '删除所有单元格',
  75. callback: function () {
  76. this.clear()
  77. }
  78. }
  79. }
  80. }
  81. },
  82. expressCompanyList: [],
  83. dateRange: [],
  84. typeBol: false,
  85. searchParam: {
  86. supplierServiceRegionPriceVos: []
  87. },
  88. searchParamRules: {
  89. supplierServiceRegionPriceVos: [
  90. { type: 'array', required: true, message: '请填写价格表', trigger: 'blur' },
  91. { validator: validatorList, required: true, message: '请输入价格表中所有信息, 多余的可通过鼠标右击进行删除行', trigger: 'blur' }
  92. ]
  93. },
  94. showContent: false,
  95. loadShow: false,
  96. saveLimit: false
  97. }
  98. },
  99. mounted() {
       this.hotSettings.dataList = this._.cloneDeep(priceList)
  1. },
  2. methods: {
  3. // 删除行之前调用
  4. beforeRemoveRowMe: function (changes, source) { // 数据改变时触发此方法
  5. this.hotSettings.dataList.splice(changes, source)
  6. },
  7. // 添加行
  8. afterCreateRowMe: function (changes) {
  9. this.hotSettings.dataList.splice(changes, 0, {
  10. region: '',
  11. destination: '',
  12. firstWeight: '',
  13. firstWeightPrice: '',
  14. riseWeight: '',
  15. riseWeightPrice: ''
  16. })
  17. },
  18. // 新增行时,动态改变值
  19. afterChangeMe: function (changes) {
  20. if (changes) {
  21. changes.forEach(([row, prop, oldValue, newValue]) => {
  22. console.log(oldValue)
  23. this.hotSettings.dataList[row][prop] = newValue
  24. })
  25. }
  26. },
  27. // 查看-excel不可编辑
  28. excalEdit() {
  29. this.hotSettings.columns.forEach(par => {
  30. par.readOnly = true
  31. })
  32. },
  33. definedShow() {
  34. this.showContent = true
  35. },
  36. saveSubmit() {
  1. // 防止点击多次触发
  2. if (this.saveLimit) return
  3.     conso.log()
  4. const that = this
  5. that.searchParam.supplierServiceRegionPriceVos = that.hotSettings.dataList
  6. const temp = that._.cloneDeep(this.searchParam)
  7. that.$refs.searchForm.validate((valid) => {
  8. if (valid) {
          console.log(this.hotSettings.dataList)
  1. that.saveLimit = true
  2. }
  3. })
  4. },
  5. // 导出文件
  6. uploadFile() {
  7. // 可查看网址https://handsontable.com/docs/7.1.0/ExportFile.html
  8. const container = this.$refs.tableServer.hotInstance
  9. const exportPlugin = container.getPlugin('exportFile')
  10. exportPlugin.downloadFile('csv', {
  11. bom: 'UTF-8', // 允许您使用BOM签名导出数据。
  12. columnDelimiter: ',', // 允许您定义列分隔符。
  13. columnHeaders: false, // 允许使用列标题导出数据。
  14. exportHiddenColumns: true, // 允许您从隐藏列导出数据。
  15. exportHiddenRows: true, // 允许您从隐藏行导出数据
  16. fileExtension: 'csv', // 允许您定义文件扩展名。
  17. filename: '供应商服务价格表[YYYY]-[MM]-[DD]', // 允许您定义文件名。
  18. mimeType: 'text/csv', // 允许您定义MIME类型。
  19. rowDelimiter: '\r\n', // 允许您定义行分隔符。
  20. rowHeaders: true // 允许您使用行标题导出数据。
  21. })
  22. }
  23. }
  24. }
  25. </script>

  

  

Handsontable vue如何实现在线编辑excal的更多相关文章

  1. handsontable在线编辑excel扩展功能-踩坑篇

    简述 先说一下背景,之所以封装handsontable插件,是因为公司要实现在线编辑导入excel文件的功能,然后我就找到了这个功能强大的插件handsontable. 具体功能 除了handsont ...

  2. [个人开源]vue-code-view:一个在线编辑、实时预览的代码交互组件

    组件简介 vue-code-view是一个基于 vue 2.x.轻量级的代码交互组件,在网页中实时编辑运行代码.预览效果的代码交互组件. 使用此组件, 不论 vue 页面还是 Markdown 文档中 ...

  3. Microsoft Azure Web Sites应用与实践【3】—— 通过Visual Studio Online在线编辑Microsoft Azure 网站

    Microsoft Azure Web Sites应用与实践 系列: [1]—— 打造你的第一个Microsoft Azure Website [2]—— 通过本地IIS 远程管理Microsoft ...

  4. 小讲堂:在线编辑在Mobox文档管理软件中的意义

    今天我们来讨论一下,mobox文档管理软件中的在线编辑的这个功能,相信这个功能是用户在日常的文档维护中非常需要的. 文档管理软件的诸多功能中,在线编辑是一块很重要的功能点,因为在线编辑可以说是提高工作 ...

  5. Office word excel电子表格在线编辑的实现方法

    Office xp之后的版本支持通过webdav协议(http的扩展)直接编辑服务器上的文件. IIS(6.0)支持webdav,这在IIS管理器的web服务扩展中可以看到.利用IIS作为webdav ...

  6. RunJS - 在线编辑、展示、分享、交流你的 JavaScript 代码

    发现一个很好玩,很强大的网站 RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码   http://runjs.cn/ 比如: http://runjs.cn/detail/l ...

  7. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  8. icon在线编辑和查找工具

    1.www.iconpng.com 2.在线编辑http://www.ico.la/ 3.小图标查找 http://icomoon.io/app/ 4.20个免费的psd http://www.osc ...

  9. word在线编辑\生成图片(包含截图与合并)

    1.业务原因 word编辑后的文章复制到html编辑器(fck等)会发生排版错乱的情况,于是混沌了.需要有一个新的方法来终结,于是产生了word能不能在线编辑,后台保存,前台显示灯一系列问题. 2.首 ...

随机推荐

  1. C# Socket keeplive 心跳检测实例

    版权声明:本文为CSDN博主「b哈利路亚d」的原创文章,重新编辑发布,请尊重原作者的劳动成果,转载的时候附上原文链接:https://blog.csdn.net/lanwilliam/article/ ...

  2. Hadoop1.X集群完全分布式模式环境部署

    Hadoop1.X集群完全分布式模式环境部署 1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台.以Hadoop分布式文件系统(HDFS,Hadoop Distri ...

  3. python 3.url了解与基础使用

    URL使用 视图: 我们运行项目在网页上查看到的我们称之为视图 视图一般在views.py下编辑 它的第一个参数永远都是request,通过它请求一些数据返回给网页给我们查看. 视图函数的返回结果必须 ...

  4. Java 之 MyBatis(一)入门

    一.Mybatis 框架概述 (1)mybatis 是一个优秀的基于 java 的持久层框架,它内部封装了 jdbc,使开发者只需要关注 sql 语句本身,而不需要花费精力去处理加载驱动.创建连接.创 ...

  5. Spring— 用更优雅的方式发HTTP请求(RestTemplate详解)

    RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率. 我之前的HTTP开发是用ap ...

  6. python使用 pdb 进行调试--- python -m pdb xxx.py 即可 和gdb使用一样

    使用 pdb 进行调试 pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能,主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变 ...

  7. Linux学习21-设置定时任务crontab

    前言 做自动化测试写的脚本需设置定时任务,在指定的时间去执行,这就需要用到定时任务.之前用jenkins可以在里面设置定时任务,很好用,其实不用jenkins,在linux上也可以用crontab做个 ...

  8. *P3694 邦邦的大合唱站队[dp]

    题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶像. 现在要求重新安排队列,使来自同一乐队的偶像连续的站在一起.重新安排的办法是,让若干偶像出列(剩下的偶像不动),然后让出列的 ...

  9. python——selenium库的使用

    selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Fire ...

  10. background-image:url为空引发的两次请求问题

    参考文章: https://blog.csdn.net/jsjhushilei/article/details/51101014 1.Nicholas 在 2009 年就开始推动各浏览器厂商,现在看起 ...