三分钟,vueExcel表格插件handsontable.js教程

虚树苔藓
• 阅读 550

npm 安装handsontable

npm install handsontable @handsontable/vue

创建handsontable

<hot-table :settings="hotSettings"></hot-table>

引入hansontable

import {HotTable} from '@handsontable/vue';
import Handsontable from 'handsontable';

添加配置

  hotSettings: {
          // language:'zh-CN',
          licenseKey: 'non-commercial-and-evaluation',//隐藏版权文字
          // data: Handsontable.helper.createSpreadsheetData(10, 26),//列表初始化数据
          data: [
            ['', '河北', '山东', '广东'],
            ["2016", 10, 11, 12,],
            ["2017", 20, 11, 14,],
            ["2018", 30, 15, 12,]
          ],
          startRows: 3,//初始化行数,无data属性时生效(该值小于minRows时,以minRows为准)
          startCols: 10,//初始化列数,无data属性时生效(该值小于minCols时,以minCols为准)
          minRows: 5,//最少行数(当初始化数据小于该值时,以该值为准)
          minCols: 16,//最少列数(当初始化数据小于该值时,以该值为准)
          minSpareCols: 1,//列的最小留白数
          minSpareRows: 1,//行的最小留白数
          colHeaders: true,//是否展示列表头,默认是A,B,C等字母,可以['列1','列2']进行自定义展示
          rowHeaders: true,//是否展示行表头,默认是1,2,3等数据,可以['行1','行2']进行自定义展示
          // colWidths: 49,//列宽度
          dropdownMenu: true,//表头展示下拉菜单,可以自定义展示
          // dropdownMenu: {
          //   items: {
          //     'row_above': {
          //       name: '上面插入一行'
          //     },
          //     'row_below': {
          //       name: '下面插入一行'
          //     },
          //     'col_left':{
          //       name: '左侧插入一列'
          //     },
          //     'col_right':{
          //       name: '右侧插入一列'
          //     },
          //     'remove_row':{
          //       name: '移除本行'
          //     },
          //     'remove_col':{
          //       name: '移除本列'
          //     },
          //     'alignment':{
          //       name: '对齐方式'
          //     },
          //     'make_read_only':{
          //       name:'只读'
          //     },
          //     // 'borders':{
          //     //   name: '边框'
          //     // },
          //     'copy':{
          //       name: '复制'
          //     },
          //     'cut':{
          //       name: '剪切'
          //     },
          //     'separator': Handsontable.plugins.ContextMenu.SEPARATOR,
          //     'clear_custom': {
          //       name: '清空所有单元格数据',
          //       callback: function () {
          //         this.clear()
          //       }
          //     }
          //   }
          // },
          className: 'htCenter',//单元格文字对齐方式(htLeft,htRight,htCenter)
          currentRowClassName: 'my-selectRow', //给选中行添加自定义class类名
          currentColClassName: 'my-selectCol', //给选中列添加自定义class类名
          autoWrapRow: true, //文字是否自动换行(当没有设置colWidths时生效)
          fixedRowsTop: 1,//列表内容从上面开始,固定定位的行数(不包含行表头)
          fixedColumnsLeft: 1,//列表内容从左面开始,固定定位的列数(不包含列表头)
          fillHandle: true,//是否开启拖拽复制操作(true,false,'horizontal'水平复制,'vertical'垂直复制)
          //autoRowSize: true,
          //autoColumnSize: true,
          // highlightedRows:[],
          contextMenu: {// 单元格右击展示菜单
            items: {
              'row_above': {
                name: '上面插入一行'
              },
              'row_below': {
                name: '下面插入一行'
              },
              'col_left': {
                name: '左侧插入一列'
              },
              'col_right': {
                name: '右侧插入一列'
              },
              'remove_row': {
                name: '移除本行'
              },
              'remove_col': {
                name: '移除本列'
              },
              'alignment': {
                name: '对齐方式'
              },
              'make_read_only': {
                name: '只读'
              },
              // 'borders':{
              //   name: '边框'
              // },
              'copy': {
                name: '复制'
              },
              'cut': {
                name: '剪切'
              },
              'separator': Handsontable.plugins.ContextMenu.SEPARATOR,
              'clear_custom': {
                name: '清空所有单元格数据',
                callback: function () {
                  this.clear()
                }
              }
            }
          }
        },

最后效果

三分钟,vueExcel表格插件handsontable.js教程

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
svg自适应写法
svg自适应写法<pre<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<titleDocument</title</head<body<divstyle"width:30%;height:3.6rem;"<svg
Stella981 Stella981
3年前
Flutter接入现有iOS工程(混编)、开发调试、打包发布精简教程
本教程是在xcode11.1、cocospod1.7.5、flutter1.10.15pre.115下完成的。    1.安装flutter    按照官网的教程,一步一步来,没什么好说的。https://flutterchina.club/setupmacos/(https://ww
Stella981 Stella981
3年前
InsightFace源码以及pre
一下摘自:https://blog.csdn.net/Fire\_Light\_/article/details/79602705(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2FFire_Light_%2Farticle%2Fdetails%2F7960
Stella981 Stella981
3年前
Postman通过脚本设置请求的cookie
关于postman前置脚本的详细介绍: https://learning.getpostman.com/docs/postman/scripts/pre\_request\_scripts/(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Flearning.getpostman.com%
Stella981 Stella981
3年前
Python获取 当前目录、上一级目录
<pre<spanstyle"color:0000ff"import</span<spanstyle"color:000000"os</span<spanstyle"color:0000ff"print</span<spanstyle"color:800000"'</span<spanstyle"c
Easter79 Easter79
3年前
TiDB Pre
8月30日,TiDB发布PreGA版。该版本对MySQL兼容性、SQL优化器、系统稳定性、性能做了大量的工作。TiDB:SQL查询优化器调整代价模型优化索引选择,支持不同类型字段比较的索引选择支持基于贪心算法的JoinReorder
Stella981 Stella981
3年前
Handsontable
\TOC\常用<!DOCTYPEhtml<html<head<!<metacharset"UTF8"<titleHandsontable</title<scriptsrc"di
Stella981 Stella981
3年前
Pre
PAT甲级1119,我先在CSDN上面发布的这篇文章:https://blog.csdn.net/weixin\_44385565/article/details/89737224(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2Fweixin_443855
Wesley13 Wesley13
3年前
Unity 获取场景中所有目标对象(包括不激活的对象)
usingUnityEngine;usingUnityEditor;usingSystem.Collections.Generic;publicclassExampleScript:MonoBehaviour{//获取场景中所有目标对象(包括不激活的对象)不包括Pre
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(