在Vue项目中引入表格插件的操作是什么?
在这篇文章中，我们来学习一下“在Vue项目中引入表格插件的操作是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。
本文实例为大家分享了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'
三、使用(在标签中使用)
四、数据中定义
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项目中引入表格插件的操作是什么”的介绍了，感谢各位的阅读
