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 25 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
vue递归实现树形组件
Jul 15 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将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Cpy和Python的效率对比
2015/03/20 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Python底层封装实现方法详解
2020/01/22 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
关于毕业的广播稿
2014/01/10 职场文书
通信生自我鉴定
2014/01/18 职场文书
2014年大学生自我评价
2014/01/19 职场文书
优秀求职信范文分享
2014/01/26 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
疾病防治方案
2014/05/31 职场文书
公司踏青活动方案
2014/08/16 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
体育运动会广播稿
2014/10/05 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
委托公证书格式
2015/01/26 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
解析原生JS getComputedStyle
2021/05/25 Javascript
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server