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如何循环提取对象数组中的值
Nov 18 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue3不同环境下实现配置代理
May 25 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
js汉字转拼音实现代码
2013/02/06 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python自定义类的数组排序实现代码
2016/08/28 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
python opencv如何实现图片绘制
2020/01/19 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
销售部主管岗位职责
2013/12/18 职场文书
美发店5.1活动方案
2014/01/24 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
学生会主席演讲稿
2014/04/25 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
使用python绘制分组对比柱状图
2022/04/21 Python