在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: [

            ["", , , ,],

            ["", , , ,],

            ["", , , ,]

          ],
　　　　　　//定义表结构

          colHeaders:[

            "问题序号","问题类型","定性法规","问题金额"

          ],
　　　　　　//定义属性

          columns:[

            {},

            {},

            {},

            {

              colHeaders:'问题金额',

              type:'numeric', //定义值的类型为数字类型

            }

          ],

        },

      }

    },

    components: {

      HotTable

    }

  }

</script>