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用mixin合并重复代码的实现
Nov 27 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 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
PHP4之COOKIE支持详解
2006/10/09 PHP
全文搜索和替换
2006/10/09 PHP
php模拟登陆的实现方法分析
2015/01/09 PHP
php制作动态随机验证码
2015/02/12 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
用JS在浏览器中创建下载文件
2014/03/05 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
Javascript小技能总结(推荐)
2016/06/02 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python绘制七段数码管实例代码
2017/12/20 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
python微信好友数据分析详解
2018/11/19 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
python中tkinter复选框使用操作
2021/11/11 Python