Handsontable vue如何实现在线编辑excal
官网地址:https://handsontable.com/
1.实现效果
2.安装
- <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的更多相关文章
- handsontable在线编辑excel扩展功能-踩坑篇
简述 先说一下背景,之所以封装handsontable插件,是因为公司要实现在线编辑导入excel文件的功能,然后我就找到了这个功能强大的插件handsontable. 具体功能 除了handsont ...
- [个人开源]vue-code-view:一个在线编辑、实时预览的代码交互组件
组件简介 vue-code-view是一个基于 vue 2.x.轻量级的代码交互组件,在网页中实时编辑运行代码.预览效果的代码交互组件. 使用此组件, 不论 vue 页面还是 Markdown 文档中 ...
- Microsoft Azure Web Sites应用与实践【3】—— 通过Visual Studio Online在线编辑Microsoft Azure 网站
Microsoft Azure Web Sites应用与实践 系列: [1]—— 打造你的第一个Microsoft Azure Website [2]—— 通过本地IIS 远程管理Microsoft ...
- 小讲堂:在线编辑在Mobox文档管理软件中的意义
今天我们来讨论一下,mobox文档管理软件中的在线编辑的这个功能,相信这个功能是用户在日常的文档维护中非常需要的. 文档管理软件的诸多功能中,在线编辑是一块很重要的功能点,因为在线编辑可以说是提高工作 ...
- Office word excel电子表格在线编辑的实现方法
Office xp之后的版本支持通过webdav协议(http的扩展)直接编辑服务器上的文件. IIS(6.0)支持webdav,这在IIS管理器的web服务扩展中可以看到.利用IIS作为webdav ...
- RunJS - 在线编辑、展示、分享、交流你的 JavaScript 代码
发现一个很好玩,很强大的网站 RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码 http://runjs.cn/ 比如: http://runjs.cn/detail/l ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- icon在线编辑和查找工具
1.www.iconpng.com 2.在线编辑http://www.ico.la/ 3.小图标查找 http://icomoon.io/app/ 4.20个免费的psd http://www.osc ...
- word在线编辑\生成图片(包含截图与合并)
1.业务原因 word编辑后的文章复制到html编辑器(fck等)会发生排版错乱的情况,于是混沌了.需要有一个新的方法来终结,于是产生了word能不能在线编辑,后台保存,前台显示灯一系列问题. 2.首 ...
随机推荐
- C# Socket keeplive 心跳检测实例
版权声明:本文为CSDN博主「b哈利路亚d」的原创文章,重新编辑发布,请尊重原作者的劳动成果,转载的时候附上原文链接:https://blog.csdn.net/lanwilliam/article/ ...
- Hadoop1.X集群完全分布式模式环境部署
Hadoop1.X集群完全分布式模式环境部署 1 Hadoop简介 Hadoop是Apache软件基金会旗下的一个开源分布式计算平台.以Hadoop分布式文件系统(HDFS,Hadoop Distri ...
- python 3.url了解与基础使用
URL使用 视图: 我们运行项目在网页上查看到的我们称之为视图 视图一般在views.py下编辑 它的第一个参数永远都是request,通过它请求一些数据返回给网页给我们查看. 视图函数的返回结果必须 ...
- Java 之 MyBatis(一)入门
一.Mybatis 框架概述 (1)mybatis 是一个优秀的基于 java 的持久层框架,它内部封装了 jdbc,使开发者只需要关注 sql 语句本身,而不需要花费精力去处理加载驱动.创建连接.创 ...
- Spring— 用更优雅的方式发HTTP请求(RestTemplate详解)
RestTemplate是Spring提供的用于访问Rest服务的客户端,RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率. 我之前的HTTP开发是用ap ...
- python使用 pdb 进行调试--- python -m pdb xxx.py 即可 和gdb使用一样
使用 pdb 进行调试 pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能,主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变 ...
- Linux学习21-设置定时任务crontab
前言 做自动化测试写的脚本需设置定时任务,在指定的时间去执行,这就需要用到定时任务.之前用jenkins可以在里面设置定时任务,很好用,其实不用jenkins,在linux上也可以用crontab做个 ...
- *P3694 邦邦的大合唱站队[dp]
题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶像. 现在要求重新安排队列,使来自同一乐队的偶像连续的站在一起.重新安排的办法是,让若干偶像出列(剩下的偶像不动),然后让出列的 ...
- python——selenium库的使用
selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Fire ...
- background-image:url为空引发的两次请求问题
参考文章: https://blog.csdn.net/jsjhushilei/article/details/51101014 1.Nicholas 在 2009 年就开始推动各浏览器厂商,现在看起 ...