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

1.实现效果

2.安装

import { HotTable } from '@handsontable/vue'
import Handsontable from 'handsontable'
 
3.页面引用
<template>
<hot-table
ref="tableServer"
:data="hotSettings.dataList" // excal中的数据源
:context-menu="hotSettings.contextMenu" // 右击鼠标可进行的操作
:col-headers="hotSettings.colHeaders" // 表格头部标题
:start-rows="hotSettings.startRows" // 默认固定行数
:start-cols="hotSettings.startCols" // 默认固定列数
:row-headers="hotSettings.rowHeaders" // 默认显示表格行头部
:row-heights="hotSettings.rowHeights" // 默认设置行高度
:manual-row-resize="hotSettings.manualRowResize" //
:manual-column-resize="hotSettings.manualColumnResize"
:manual-row-move="hotSettings.manualRowMove"
:columns="hotSettings.columns"
:before-remove-row="hotSettings.beforeRemoveRow" // 删除行之前触发的事件
:after-create-row="hotSettings.afterCreateRow" // 添加行后触发的事件 //一定要记住所有的事件、数值一定要绑定在标签上才可使用,只在js的data中绑定是不可以的
:after-change="hotSettings.afterChange" // 新增行,动态改变值触发的事件
:id="`hotTableAll${$route.params.id}`"
class="table_hot"
license-key="non-commercial-and-evaluation"
/>
</el-form-item>
<el-button class="primary-button uploadButton"
size="small"
type="primary"
icon="el-icon-upload"
@click="uploadFile">导出</el-button>
</template>
<script>
import addressProvince from '@/components/addressProvince'
import { HotTable } from '@handsontable/vue'
import Handsontable from 'handsontable'
import { Message } from 'element-ui'
import priceList from '@/utils/priceList.js' // 如果excal中有值为空,可拦截
const validatorList = (rule, value, callback) => {
  for (let i = 0; i < value.length; i++) {
if (!value[i].region || !value[i].destination) {
callback(new Error('请输入价格表中所有信息, 多余的可通过鼠标右击进行删除行'))
return
}
}
callback()
}
const riseWeightVal = function (value, callback) {
if (/^\d+(?=\.{0,1}\d+$|$)/.test(value) || value === '') {
callback(true)
} else {
Message.error({
message: '请输入数字'
})
callback(false)
}
} export default {
components: {
addressProvince,
HotTable
},
data() {
return {
addressList: [{
area: []
}],
hotSettings: {
dataList: [], //
colHeaders: ['区域', '目的地', '首重 kg', '首重价格', '续重 kg', '续重价格'],
startRows: 8,
startCols: 6,
rowHeaders: true,
rowHeights: 40,
manualRowResize: true,
manualColumnResize: true,
manualRowMove: true,
customBorders: true,
columns: [
      //data: dataList数组中对应的 键,readOnly: 只读, type: 属于什么类型 例:text, numeric, validator: 数据验证
{ data: 'region', readOnly: false, type: 'text' },
{ data: 'destination', readOnly: false, type: 'text' },
{ data: 'firstWeight', readOnly: false, validator: riseWeightVal, allowInvalid: false },
{ data: 'firstWeightPrice', readOnly: false, validator: riseWeightVal, allowInvalid: false },
{ data: 'riseWeight', readOnly: false, validator: riseWeightVal, allowInvalid: false },
{ data: 'riseWeightPrice', readOnly: false, validator: riseWeightVal, allowInvalid: false }
],
beforeRemoveRow: this.beforeRemoveRowMe,
afterCreateRow: this.afterCreateRowMe,
afterChange: this.afterChangeMe,
contextMenu: {
items: {
'row_above': {
name: '在此行上方插入行'
},
'row_below': {
name: '在此行下方插入行'
},
'separator': Handsontable.plugins.ContextMenu.SEPARATOR,
'copy': {
name: '复制'
},
'undo': {
name: '撤消'
},
'separator1': Handsontable.plugins.ContextMenu.SEPARATOR,
'remove_row': {
name: '删除行'
},
'clear_column': {
name: '删除列'
},
'clear_custom': {
name: '删除所有单元格',
callback: function () {
this.clear()
}
}
}
}
},
expressCompanyList: [],
dateRange: [],
typeBol: false,
searchParam: {
supplierServiceRegionPriceVos: []
},
searchParamRules: {
supplierServiceRegionPriceVos: [
{ type: 'array', required: true, message: '请填写价格表', trigger: 'blur' },
{ validator: validatorList, required: true, message: '请输入价格表中所有信息, 多余的可通过鼠标右击进行删除行', trigger: 'blur' }
]
},
showContent: false,
loadShow: false,
saveLimit: false
}
}, mounted() {
   this.hotSettings.dataList = this._.cloneDeep(priceList)
  },
methods: {
// 删除行之前调用
beforeRemoveRowMe: function (changes, source) { // 数据改变时触发此方法
this.hotSettings.dataList.splice(changes, source)
},
// 添加行
afterCreateRowMe: function (changes) {
this.hotSettings.dataList.splice(changes, 0, {
region: '',
destination: '',
firstWeight: '',
firstWeightPrice: '',
riseWeight: '',
riseWeightPrice: ''
})
},
// 新增行时,动态改变值
afterChangeMe: function (changes) {
if (changes) {
changes.forEach(([row, prop, oldValue, newValue]) => {
console.log(oldValue)
this.hotSettings.dataList[row][prop] = newValue
})
}
},
// 查看-excel不可编辑
excalEdit() {
this.hotSettings.columns.forEach(par => {
par.readOnly = true
})
},
definedShow() {
this.showContent = true
},
saveSubmit() {
      // 防止点击多次触发
if (this.saveLimit) return
    conso.log()
const that = this
that.searchParam.supplierServiceRegionPriceVos = that.hotSettings.dataList
const temp = that._.cloneDeep(this.searchParam)
that.$refs.searchForm.validate((valid) => {
if (valid) {
      console.log(this.hotSettings.dataList)
          that.saveLimit = true
}
})
},
// 导出文件
uploadFile() {
// 可查看网址https://handsontable.com/docs/7.1.0/ExportFile.html
const container = this.$refs.tableServer.hotInstance
const exportPlugin = container.getPlugin('exportFile')
exportPlugin.downloadFile('csv', {
bom: 'UTF-8', // 允许您使用BOM签名导出数据。
columnDelimiter: ',', // 允许您定义列分隔符。
columnHeaders: false, // 允许使用列标题导出数据。
exportHiddenColumns: true, // 允许您从隐藏列导出数据。
exportHiddenRows: true, // 允许您从隐藏行导出数据
fileExtension: 'csv', // 允许您定义文件扩展名。
filename: '供应商服务价格表[YYYY]-[MM]-[DD]', // 允许您定义文件名。
mimeType: 'text/csv', // 允许您定义MIME类型。
rowDelimiter: '\r\n', // 允许您定义行分隔符。
rowHeaders: true // 允许您使用行标题导出数据。
})
}
}
}
</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. docker build 错误 /usr/share/dotnet/sdk/2.1.801/Microsoft.Common.CurrentVersion.targets(2106,5): warning MSB3245: Could not resolve this reference

    docker dotnet Restore 的时候报错, 一度怀疑是linux的dotnet core sdk没有装好, 卸了装, 装了卸, 试了好几遍还是无效(Microsoft.Common.Cu ...

  2. 批量关联update

    UPDATE A SET A.field = B.field from table A inner join table B ON A.field = b.field

  3. js数据类型及变量知识(一)

    1.js中基本数据类型有哪些?    基本数据类型:        undefined.number.string.boolean.null.[object] object[引用数据类型]       ...

  4. 非洲affrike单词

    affrike 英文单词,含义是非洲,非洲大陆. 中文名:非洲 外文名:affrike 目录 释义 affrike noun名词 非洲,也用做africa 1.Word Origin and Hist ...

  5. nepenthes用法

    安装 # apt-get install nepenthes 配置文件 # vi submit-file.conf submit-file { path "/var/lib/nepenthe ...

  6. 【故障处理】队列等待之TX - allocate ITL entry引起的死锁处理

    [故障处理]队列等待之TX - allocate ITL entry引起的死锁处理 1  BLOG文档结构图       2  前言部分 2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌 ...

  7. node.js 学习一

    Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. 与PHP 相似 都是单进程. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调 ...

  8. NodeJS 多版本管理(NVM)

    前言 现在前端各种框架更新较快,对 Node 的依赖也不一样,Node 的过版本管理也很有必要. NVM(Node Version Manager),是一个 Node 的版本管理工具. 官方的 NVM ...

  9. iptables 规则学习

    iptables 一共有 3 张表:mangle,nat,filter mangle 表主要处理 ttl,tos,mark 等信息(进) filter 顾名思义就是过滤器,用作防火墙(出) nat 主 ...

  10. danci1

    oddball 英 ['ɒdbɔːl] 美 adj. 古怪的:奇怪的 n. 古怪:古怪的人 rather than 英 美 而不是:宁可…也不愿 grasp 英 [grɑːsp] 美 [ɡræsp] ...