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)，这个类的样式定义了背景变为红色）
这段时间在项目中用到这个技术，遇到了很多坑，由于时间的关于先记录到这里，后面会抽时间整理更多的出来
原文：https://www.cnblogs.com/wuhefeng/p/10833939.html