本文实例为大家分享了vue引入Excel表格插件的具体代码,供大家参考,具体内容如下
一、安装
复制代码
1
2npm install handsontable-pro @handsontable-pro/vue npm install handsontable @handsontable/vue
二、引用(在页面引用)
复制代码
1
2
3import { HotTable } from ‘@handsontable-pro/vue' import ‘…/…/node_modules/handsontable-pro/dist/handsontable.full.css' import Handsontable from ‘handsontable-pro'
三、使用(在标签中使用)
复制代码
1
2
3<div id="hotTable" class="hotTable"> <HotTable ref="hotTableComponent" :settings="hotSettings"></HotTable> </div>
四、数据中定义
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116data () { 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' }, ] } } },
五、引入组件
复制代码
1
2
3components: { HotTable },
六、方法中使用
复制代码
1
2
3
4
5
6
7methods: { 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) } },
重点:
复制代码
1
2this.$refs.hotTableComponent.hotInstance // 获取表格数据,调用表格方法, ****** 指向表格 getPlugin(‘MergeCells').mergedCellsCollection.mergedCells) // 获取合并单元格之后需要的参数
注意:需要接口获取数据直接对this.hotSettings下data赋值就行
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持靠谱客。
最后
以上就是谨慎老虎最近收集整理的关于vue引入Excel表格插件的方法的全部内容,更多相关vue引入Excel表格插件内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复