vue引入Excel表格插件的方法


Posted in Vue.js onApril 28, 2021

本文实例为大家分享了vue引入Excel表格插件的具体代码,供大家参考,具体内容如下

一、安装

npm install handsontable-pro @handsontable-pro/vue
npm install handsontable @handsontable/vue

二、引用(在页面引用)

import { HotTable } from ‘@handsontable-pro/vue'
import ‘…/…/node_modules/handsontable-pro/dist/handsontable.full.css'
import Handsontable from ‘handsontable-pro'

三、使用(在标签中使用)

<div id="hotTable" class="hotTable">
    <HotTable  ref="hotTableComponent" :settings="hotSettings"></HotTable>
</div>

四、数据中定义

data () {
    return {
      list: [],
      root: 'test-hot',
      hotSettings: {
        data: [ // 数据可以是二维数组,也可以是数组对象
        ],
        startRows: 3, // 行列范围
        startCols: 3,
        minRows: 20, // 最小行数
        minCols: 5, //最小列数
        maxRows: 20, // 最大行列
        maxCols: 20,//最大列数
        rowHeaders: true, // 行表头,可以使布尔值(行序号),可以使字符串(左侧行表头相同显示内容,可以解析html),也可以是数组(左侧行表头单独显示内容)。
        colHeaders: ['账户等级', '账户名称', '账户编号', '账户类别'], // 自定义列表头or 布尔值
        minSpareCols: 0, // 列留白
        minSpareRows: 0, // 行留白
        currentRowClassName: 'currentRow', // 为选中行添加类名,可以更改样式
        currentColClassName: 'currentCol', // 为选中列添加类名
        autoWrapRow: true, // 自动换行
        className: 'htCenter htMiddle', // 默认单元格样式,垂直居中
        contextMenu: {
          items: {
            // 'row_above': {
            //   name: '上方插入一行'
            // },
            // 'row_below': {
            //   name: '下方插入一行'
            // },
            // 'col_left': {
            //   name: '左方插入列'
            // },
            // 'col_right': {
            //   name: '右方插入列'
            // },
            'hsep1': '---------', // 提供分隔线
            'remove_row': {
              name: '删除行'
            },
            'remove_col': {
              name: '删除列'
            },
            'make_read_only': {
              name: '只读'
            },
            'borders': {
              name: '表格线'
            },
            'copy': {
              name: '复制'
            },
            'cut': {
              name: '剪切'
            },
            'commentsAddEdit': {
              name: '添加备注'
            },
            'commentsRemove': {
              name: '取消备注'
            },
            'freeze_column': {
              name: '固定列'
            },
            'unfreeze_column': {
              name: '取消列固定'
            },
            'mergeCells': {
              name: '合并单元格'
            },
            'alignment': {
              name: '文字位置'
            },
            'hsep2': '---------'
          }
        },
        afterChange: function (changes, source) { // 数据改变时触发此方法
          // console.log(this.getSourceData())
          this.list = this.getSourceData() // 获取表格里的数据
          // console.log(this.getPlugin('MergeCells').mergedCellsCollection.mergedCells) // 获取表格合并单元格的参数
        },
        manualColumnFreeze: true, // 手动固定列  ?
        manualColumnMove: true, // 手动移动列
        manualRowMove: true, // 手动移动行
        manualColumnResize: true, // 手工更改列距
        manualRowResize: true, // 手动更改行距
        comments: true, // 添加注释  ?
        // cell: [ // ???
        //   {row: 1, col: 1, comment: {value: 'this is test'}}
        // ],
        customBorders: [], // 添加边框
        columnSorting: true, // 排序
        stretchH: 'all', // 根据宽度横向扩展,last:只扩展最后一列,none:默认不扩展
        fillHandle: true, // 选中拖拽复制 possible values: true, false, "horizontal", "vertical"
        fixedColumnsLeft: 0, // 固定左边列数
        fixedRowsTop: 0, // 固定上边列数
        mergeCells: [ // 合并
          // {row: 1, col: 1, rowspan: 3, colspan: 3}, // 指定合并,从(1,1)开始行3列3合并成一格
          // {row: 3, col: 4, rowspan: 2, colspan: 2}
        ],
        columns: [ // 设置表头名称
          {
            data: 'acctLevel'
          },
          {
            data: 'acctName'
          },
          {
            data: 'acctNo'
          },
          {
            data: 'acctType'
          },
        ]
      }
    }
  },

五、引入组件

components: {
    HotTable
 },

六、方法中使用

methods: {
    swapHotData: function () {
      // The Handsontable instance is stored under the `hotInstance` property of the wrapper component.
      // this.$refs.hotTableComponent.hotInstance.loadData([['new', 'data']])
      console.log(this.$refs.hotTableComponent.hotInstance.getPlugin('MergeCells').mergedCellsCollection.mergedCells)
    }
},

重点:

this.$refs.hotTableComponent.hotInstance // 获取表格数据,调用表格方法, ****** 指向表格
getPlugin(‘MergeCells').mergedCellsCollection.mergedCells) // 获取合并单元格之后需要的参数

注意:需要接口获取数据直接对this.hotSettings下data赋值就行

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
原生JS封装vue Tab切换效果
vue项目两种方式实现竖向表格的思路分析
vue首次渲染全过程
浅谈vue2的$refs在vue3组合式API中的替代方法
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
vue backtop组件的实现完整代码
vue中三级导航的菜单权限控制
Mar 31 #Vue.js
You might like
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP分页显示制作详细讲解
2008/11/19 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
JavaScript中Function详解
2015/02/27 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
Python如何读写CSV文件
2020/08/13 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
python爬取youtube视频的示例代码
2021/03/03 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
局域网标准
2016/09/10 面试题
毕业生优秀推荐信
2013/11/26 职场文书
企业给企业的表扬信
2014/01/13 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
项目负责人任命书
2014/06/04 职场文书
会计实训报告范文
2014/11/04 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
微观世界观后感
2015/06/10 职场文书
运动员加油词
2015/07/18 职场文书
golang json数组拼接的实例
2021/04/28 Golang
德劲DE1105机评
2022/04/05 无线电