vue 表格插件,vue导出excel插件
本文主要详细介绍vue引入Excel电子表格插件的方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue引入Excel电子表格插件的具体代码，供大家参考。具体内容如下
一、安装
npm安装handsontable-pro @ handsontable-pro/vue
npm安装handsontable @handsontable/vue
二、引用(在页面引用)
从“@handsontable-pro/vue”导入{ HotTable }
导入…/…/node _ modules/handsontable-pro/dist/handsontable . full . CSS
从“handsontable-pro”导入Handsontable
三、使用（在标签中使用）
div id= hot table class= hot table
hot table ref= hot table component :settings= hotSettings /hot table
/div
四、数据中定义
data () {
返回{
列表：[]，
根：测试热，
热设置：{
Data: [//Data可以是二维数组，也可以是数组对象。
],
StartRows: 3，//行和列范围
startCols: 3，
MinRows: 20，//最小行数
分钟：5，//最小列数
MaxRows: 20，//最大行数和列数
MaxCols: 20，//最大列数
RowHeaders: true，//行头可以是布尔值(行序号)、字符串(左侧行头显示相同内容，可以解析html)、数组(左侧行头单独显示内容)。
ColHeaders: [帐户级别，帐户名，帐号，帐户类别]，//用户定义的列表头或布尔值
Minecol: 0，//列留空
Minerows: 0，//空白行
当前行类名：“当前行”，//为所选行添加类名以更改样式。
current col class name: current col ，//添加所选列的类名
Autowrap: true，//wrap。
类名：“ht center ht middle”，//默认单元格样式，垂直居中
上下文菜单：{
项目：{
//row_above: {
//name:在上面插入一行
//},
//row_below: {
//name:在下面插入一行
//},
//col_left: {
//name:在左侧插入列
//},
//col_right: {
//name:在右侧插入列
//},
hsep1: -，//提供分隔线
remove_row :
名称：“删除行”
},
remove_col :
名称：“删除列”
},
“设为只读”:{
名称：“只读”
},
边框:{
名称：“表格行”
},
复制:{
名称：“副本”
},
剪切:{
名称：“切”
},
commentsAddEdit: {
名称：“添加评论”
},
commentsRemove: {
名称：“取消评论”
},
冻结_列:{
名称：“固定列”
},
解冻_列:{
名称：“非固定列”
},
合并单元格:{
名称：“合并单元格”
},
对齐:{
名称：“文本位置”
},
hsep2: -
}
},
更改后：function (changes，source){//当数据更改时触发此方法
//console . log(this . get source data())
this . list=this . getsourcedata()//获取表中的数据
//console . log(this . get plugin( merge cells )。mergedcellcollection . merged cells)//获取表格合并单元格的参数。
},
ManualColumnFreeze: true，//手动修复列？
ManualColumnMove: true，//手动移动列
ManualRowMove: true，//手动移动行
Manualnresize: true，//手动更改列间距。
ManualRowResize: true，//手动更改行距。
评论：真，//添加注释？
//单元格：[ //?
//{第一行，第一列，注释：{值：这是测试 }}
//],
自定义边框：[],//添加边框
列排序：true，//排序
stretchH: all ，//根据宽度横向扩展，最后：只扩展最后一列，无：默认不扩展
fillHandle: true，//选中拖拽复制可能的值：真、假、水平、垂直
fixedColumnsLeft: 0，//固定左边列数
fixedRowsTop: 0，//固定上边列数
合并单元格：[ //合并
//{行：1,列：1,行跨度：3,列跨度：3},//指定合并，从(1,1)开始行3列3合并成一格
//{行：3,列：4,行跨度：2,列跨度：2}
],
列：[ //设置表头名称
{
数据：" acctLevel "
},
{
数据："帐户名称"
},
{
数据："账号"
},
{
数据：" acctType "
},
]
}
}
},
五、引入组件
组件：{
热点表
},
六、方法中使用
方法：{
swapHotData: function () {
可手持的实例存储在包装组件的"热实例"属性下。
//这个参考文献。热表组件。热点实例。加载数据([[ new ， data]])
console.log(这个参考文献。热表组件。热点实例。获取插件(“合并单元格”)。mergedcellscollection。合并的单元格)
}
},
重点：
这个参考文献。热表组件。热实例//获取表格数据，调用表格方法， ****** 指向表格
获取插件(“合并单元格”)。mergedcellscollection。合并单元格)//获取合并单元格之后需要的参数
注意：需要接口获取数据直接对this.hotSettings下数据赋值就行
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。