handsontable的基本使用

基本使用#

见官网
https://handsontable.com/docs/javascript-data-grid/vue-installation/#basic-usage

优化#

关闭购买key的提示信息#

默认情况下使用handsontable会建议你购买license key 。如果我们出于学习目的或者非商用的用途，则可以在使用hansontable的时候传递一个标识来告诉它我们用来非商用的，这样就不会显示下面的提示信息了

<hot-table
  licenseKey="non-commercial-and-evaluation"
  :data="data"
  :rowHeaders="true"
  :colHeaders="true"
></hot-table>

按需引入#

main.js

import 'handsontable/dist/handsontable.full.css'

import Handsontable from 'handsontable/base'
import {
  registerCellType, // cell types' registering function
  NumericCellType
} from 'handsontable/cellTypes'

import {
  registerPlugin, // plugins' registering function
  UndoRedo,
  NestedHeaders,
  ColumnSorting
} from 'handsontable/plugins'
registerCellType(NumericCellType)
registerPlugin(UndoRedo)
registerPlugin(NestedHeaders)
registerPlugin(ColumnSorting)

Test.vue

<template>
  <div class="test">
    <hot-table :data="data" :settings="hotSettings"></hot-table>
  </div>
</template>

<script>
import { HotTable } from '@handsontable/vue'
export default {
  components: {
    HotTable
  },
  data() {
    return {
      data: [
        ['', 'Ford', 'Volvo', 'Toyota', 'Honda'],
        ['2016', 10, 11, 12, 13],
        ['2017', 20, 11, 14, 13],
        ['2018', 30, 15, 12, 13]
      ],
      hotSettings: {
        // 行头设置
        rowHeaders: true,
        // 表头设置
        // 可以设置布尔值、数组、函数
        // colHeaders: ['测试1', '测试2', '测试3', '测试4', '测5'],
        colHeaders: true,
        height: 'auto',
        licenseKey: 'non-commercial-and-evaluation',
        // 合并表头
        // 注意：如果是按需引入的话需要注册"NestedHeaders"插件
        nestedHeaders: [
          ['测试1', { label: '测试2', colspan: 2 }, '测试3', '测试4']
        ],
        manualColumnMove: true,
        // 设置列的宽度
        // colWidths: [50, 60, 70, 300],
        // 将容器的宽度平均分配到列
        stretchH: 'all',
        // 开启列排序
        columnSorting: {
          sortEmptyCells: true,
          initialConfig: {
            column: 0,
            // 默认升序
            sortOrder: 'desc'
          }
        }
      }
    }
  }
}
</script>