handsontable右键新增、删除改为按钮新增删除

handsontable自带右键新增表格行和删除行功能（afterchange钩子中），但是实际使用中，右键功能并不容易被发现，用户的使用体验不好，所以需要把新增行和删除行的功能拿出来，在表格外使用按钮实现表格行的新增和删除。实现的效果如下图所示：

html结构

 <hot-table key="climate" ref="climateRegulateRef" :settings="climateReclassify"></hot-table>
 <el-button type="success"
            size="mini"
            icon="el-icon-plus"
            @click="addClimateReClassRow">
 </el-button>
 <el-button type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeClimateReclassifyRow">
 </el-button>

表格数据初始化

        climateReclassify: {
          data: [{selectBox: false, newVal: 1, typeName: '农田', oldVal: '', type: ''}],
          colHeaders: ['', '新值', '类型名称', '原值', '种类'],
          colWidths: [50, 150, 150, 150, 150],
          columns: [
            {data: 'selectBox', type: 'checkbox'},
            {data: 'newVal', type: 'numeric', readOnly: false},
            {data: 'typeName'},
            {data: 'oldVal'},
            {data: 'type', editor: 'select', selectOptions: ['植被', '水体', '其他']}
          ],
          height: '100%',
          licenseKey: "non-commercial-and-evaluation" // 非商业用途声明
        },

新增表格行函数

addClimateReClassRow: function () {
  let climateTable = this.$refs.climateRegulateRef.hotInstance;
  let data = climateTable.getSourceData()
  data[data.length] = {selectBox: false, newVal: '', typeName: '', oldVal: '', type: ''};
  climateTable.loadData(data)
}

删除表格行函数

removeClimateReclassifyRow() {
        let climateTable = this.$refs.climateRegulateRef.hotInstance;
        let indexArr = []
        let sourceData = []
        let data = climateTable.getSourceData().concat()
        for (let i = 0; i < data.length; i++) {
          if (data[i].selectBox === true) {
            indexArr.push(i)
          } else {
            sourceData.push(data[i])
          }
        }
        if (indexArr.length === 0) {
          Message.warning("请至少选择一行数据删除");
          return;
        }
        if (sourceData.length === 0) {
          Message.warning("至少应保留一种类型");
          return;
        }
        climateTable.loadData(sourceData);
      }