提示：文章还会持续更新

---

前言

工作中用到了handsontable，正好通过这个文章系统得总结一下。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Handsontable 是什么？

首先放一下官方文档地址，喜欢阅读英文的小伙伴可以主要参考官方文档。
Handsontable官方文档
简单的来讲就是一套在线excel表格。

二、使用步骤

1.安装

React：npm install @handsontable/react handsontable
Angular：npm install @handsontable/angular handsontable
Vue:npm install @handsontable/vue handsontable

2.引入库

代码如下（示例）：

<script>
import Handsontable from 'handsontable'
</script>

<style src="../../../../node_modules/handsontable/dist/handsontable.full.css"></style>

3.往表格写入数据

代码如下（示例）：

<div id="tableMaterial" />
// 渲染
        setHotTable() {
            this.hot = new Handsontable(document.getElementById('tableMaterial'), {
                width: '100%',
                height: 500,
                stretchH: 'all',
                className: 'htCenter',
                // rowHeaders: true,  //左侧表头是否显示
                data: [],
                manualColumnResize: true,
                colWidths: [20,,20,20],
                colHeaders: true,
                colHeaders: ['材料id(read-only)', '材料名', '是否清楚材料是否必须上传', '是否清楚产生方式', '相关图片(read-only)'],
                columns: [
                    {
                        data: 'materialId',
                        type: 'numeric',
                        editor: false
                    },
                    {
                        data: 'materialName'
                    },
                    {
                        data: 'qnrIsRequired',
                        type: 'checkbox',
                        // checkedTemplate: 1,
                        // uncheckedTemplate: 0
                    },
                    {
                        data: 'qnrProduceSource',
                        type: 'checkbox'
                    },
                    {
                        data: 'ssMaterialQnrPic',
                        renderer: "html",  // 将字符传转化成html，并渲染html
                        editor: false
                    }
                ],
                afterChange: (change, source) => {
                    console.log('change cell')
                    console.log(change)
                    if (source === 'loadData') {
                        return; //don't save this change
                    }
                    if (!this.autoSave) {
                        return;
                    }
                    this.autoChangeSave(change) // 数据变动 调用自定义方法保存
                    // clearTimeout(autosaveNotification);
                    // ajax('scripts/json/save.json', 'GET', JSON.stringify({ data: change }), function (data) {
                    //     this.exampleConsole = 'Autosaved (' + change.length + ' ' + 'cell' + (change.length > 1 ? 's' : '') + ')';
                    //     autosaveNotification = setTimeout(function () {
                    //         this.exampleConsole = 'Changes will be autosaved';
                    //     }, 500);
                    // });
                },
                // contextMenu: {      // 右键点击出现的菜单
                //     items: {
                //         row_above: {
                //             name: '上方插入一行'
                //         },
                //         row_below: {
                //             name: '下方插入一行'
                //         },
                //         remove_row: {
                //             name: '删除行'
                //         }
                //     }
                // },
                licenseKey: 'non-commercial-and-evaluation',
          }

4. 效果图

---

总结

提一个遇到的坑，父子组件的所有标签里也不能有同名的id，如果有同名的标签id， this.hot = new Handsontable(document.getElementById(‘table’), {…}) 时，只会在父组件的标签里去渲染。