在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)，這個類的樣式定義了背景變為紅色）

   

這段時間在項目中用到這個技術，遇到了很多坑，由於時間的關於先記錄到這里，后面會抽時間整理更多的出來