在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)，这个类的样式定义了背景变为红色）

   

这段时间在项目中用到这个技术，遇到了很多坑，由于时间的关于先记录到这里，后面会抽时间整理更多的出来