hansontable在vue中的基本使用教學

<template>
  <div id="hansontable">
    <hot-table
      :data="data"
      :settings="hotSettings"
      ref="hotTableRef"
    ></hot-table>
  </div>
</template>

<script>
import Handsontable from 'handsontable'
import { HotTable } from '@handsontable/vue'
import 'handsontable/dist/handsontable.full.css'
import { registerAllModules } from 'handsontable/registry'

// register Handsontable's modules
registerAllModules()

import hotSettings from './hotSettings'

export default {
  components: {
    HotTable,
  },
  data() {
    return {
      // data: Handsontable.helper.createSpreadsheetData(10, 7),
      data: [
        { car: 'Tesla', year: 2017, chassis: 'black', bumper: 'black' },
        { car: 'Nissan', year: 2018, chassis: 'blue', bumper: 'blue' },
        { car: 'Chrysler', year: 2019, chassis: 'yellow', bumper: 'black' },
        { car: 'Volvo', year: 2020, chassis: 'white', bumper: 'gray' },
      ],
      hotSettings,
      hotInstance: null,
    }
  },
  mounted() {
    // 獲取範例
    this.hotInstance = this.$refs.hotTableRef.hotInstance
    const getDataAtRowProp = this.hotInstance.getDataAtRowProp
    // 範例：只允許單元格值為2019的資料進行更改
    this.hotInstance.updateSettings({
      cells(row, col, prop) {
        const cellProperties = {}
        console.log(row, prop)
        if (getDataAtRowProp(row, prop) == 2019) {
          cellProperties.editor = false
        } else {
          cellProperties.editor = 'text'
        }
        return cellProperties
      },
    })
  },
}
</script>

<!-- 注意：這裡不能加"scoped"，否則表頭的背景顏色無法設定 -->
<style>
.make-me-red {
  color: red;
}
.custom-table thead th {
  background-color: #d7f1e1;
}
</style>

import Handsontable from 'handsontable'

Handsontable.renderers.registerRenderer(
  'negativeValueRenderer',
  negativeValueRenderer
)

function negativeValueRenderer(
  instance,
  td,
  row,
  col,
  prop,
  value,
  cellProperties
) {
  Handsontable.renderers.TextRenderer.apply(this, arguments)

  // 範例1:如果單元格的值小於10，則新增類名
  if (parseInt(value, 10) < 0) {
    td.className = 'make-me-red'
  }

  // 如果單元格的值為空或者沒值
  if (!value || value === '') {
    td.style.background = '#EEE'
  } else {
    if (value === 'Nissan') {
      td.style.fontStyle = 'italic'
    }

    td.style.background = ''
  }
}

function firstRowRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments)
  td.style.fontWeight = 'bold'
  td.style.color = 'green'
  td.style.background = 'orange'
}

const hotSetting = {
  licenseKey: 'non-commercial-and-evaluation',
  // colHeaders: true,
  // 列合併
  //    注意：在第一列的表頭是不能合併的
  // nestedHeaders: [
  //   ['Car', { label: 'Year', colspan: 5 }, 'Chassis color', 'Bumper color'],
  //   [
  //     'Country',
  //     { label: 'City', colspan: 3 },
  //     'Address',
  //     'Zip code',
  //     'MobileH',
  //   ],
  // ],
  // 列名
  colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
  // rowHeaders: true,
  rowHeights: 40,
  width: '100%',
  // height: 'auto',
  height: 400,
  // 是否可以手動調整列大小
  manualColumnResize: true,
  // 將所有的列平均拉伸到父容器的寬度
  stretchH: 'all',
  // 右鍵下拉式選單
  // dropdownMenu: true,
  filters: true,
  dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
  // 列排序
  columnSorting: true,
  // 單元格的合併
  mergeCells: [{ row: 0, col: 0, rowspan: 2, colspan: 2 }],
  // 設定單元格的水平和垂直居中，併為表格新增自定義的類名
  className: 'htCenter htMiddle custom-table',
  // 單元格樣式設定
  cells(row, col) {
    const cellProperties = {}

    // 對第一行設定樣式，注意：不包括表頭
    //     方式1： 直接通過函數
    //     方式2： 字串，通過hansontable的map對映使用渲染器
    if (row === 0) {
      cellProperties.renderer = firstRowRenderer // uses function directly
    } else {
      cellProperties.renderer = 'negativeValueRenderer'
    }
    return cellProperties
  },
  // 是否唯讀
  // readOnly: true,
}

export default hotSetting