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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue实现登陆页面开发实践
May 30 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连接access数据库
2008/03/27 PHP
PHP.vs.JAVA
2016/04/29 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
解决Layui中layer报错的问题
2019/09/03 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
浅谈五大Python Web框架
2017/03/20 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python游戏地图最短路径求解
2019/01/16 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
总经理司机职责
2014/02/02 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
班级学习计划书
2014/04/27 职场文书
先进事迹演讲稿
2014/09/01 职场文书
个人总结与自我评价
2014/09/18 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
晚会开幕词
2015/01/28 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python