在vue中使用handsontable

1.使用npm安裝

npm install handsontable @handsontable/vue

2.定義結構

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

3.引入handsontable及其樣式

import { HotTable } from '@handsontable/vue'; import 'handsontable/dist/handsontable.full.css';

components: { HotTable }

所有代碼：

<template>
  <div>
    <h1>dd</h1>
　　<!--經過 ：settings="hotSettings" 來定義結構，數據，以及屬性等-->
    <hot-table  :settings="hotSettings"></hot-table>
  </div>
</template>

<script> import { HotTable } from '@handsontable/vue'; import 'handsontable/dist/handsontable.full.css'; export default { data(){ return{ hotSettings:{
　　　　　　//定義數據 data: [ ["2016", 10, 11, 12,], ["2017", 20, 11, 14,], ["2018", 30, 15, 12,] ],
　　　　　　//定義表結構 colHeaders:[ "問題序號","問題類型","定性法規","問題金額" ],
　　　　　　//定義屬性 columns:[ {}, {}, {}, { colHeaders:'問題金額', type:'numeric', //定義值的類型爲數字類型 } ], }, } }, components: { HotTable } } </script>

效果如圖：

（紅色部分是由於設置了值的類型爲數字類型，當輸入的值與類型不符時，就會自動產生一個新的類(類名爲htInvalid)，這個類的樣式定義了背景變爲紅色）

   

這段時間在項目中用到這個技術，遇到了不少坑，因爲時間的關於先記錄到這裏，後面會抽時間整理更多的出來