在Vue项目中引入表格插件的操作是什么，如何应用-群英

上一篇：Vue中引入PWA怎么做，具体的方法过程是什么下一篇：React文件路径别名怎样设置配置，操作是什么

在这篇文章中，我们来学习一下“在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'

三、使用（在标签中使用）

<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项目中引入表格插件的操作是什么，如何应用”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

标签： vue表格插件

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：Vue中引入PWA怎么做，具体的方法过程是什么下一篇：React文件路径别名怎样设置配置，操作是什么