vue+handsontable行只读，增删改，右键汉化功能

import "handsontable/languages/zh-CN"; //引入中文语言包
data() {
    return {
      tableHeader:[],
      root: "test-hot",
      hotSettings: {
        data: [],
        columns: [],
        className:"htCenter htMiddle",//水平垂直居中
        mergeCells: [], //右键菜单如果有合并单元格，这项必须写,需求不能合并单元格
        //表格线customBorders:true必须写，contextMenu里面的borders才能生效
        customBorders: true,
        language: "zh-CN", //声明用中文的语言包
        contextMenu: [
          "row_below",
          "remove_row"
        ],
        afterCreateRow:this.afterCreateRowMe,
        afterChange:this.afterChangeMe,
        beforeRemoveRow:this.beforeRemoveRowMe,
        cells:this.rowReadonly
      }
    }
},
rowReadonly(row, col, prop) {
      var cellProperties = {};
      if (row < this.tableHeader.length) {
          cellProperties.readOnly = true;
      }
      return cellProperties;
},
    /* 新增一行
    index:当前行的索引
    amount：新增的行数
    source：ContextMenu.rowBelow   ContextMenu.rowAbove 
    */
afterCreateRowMe(index, amount, source) {
      if (index<this.tableHeader.length) {
        this.$message({ type: "error", message: '请到添加或编辑页添加表头' });
        return false
      } else {
        var firstVal = ''
        var obj = {
          dataTableId:this.dataTableId
        }
        if (source=='ContextMenu.rowBelow') {
          let idx = index==0 ? 0 : index-1;
          this.hotSettings.data.forEach((val, i) => {
            if (i==idx) {
              obj.id = this.hotSettings.data[i].ID
              obj.upOrDown = 1
            }
          })
        } else if (source=='ContextMenu.rowAbove') {
          this.hotSettings.data.forEach((val, i) => {
            if (i==index+1) {
              obj.id = this.hotSettings.data[i].ID
              obj.upOrDown = 0
            }
          })
        }
        this.$http.post("url",obj).then(res => {
          if (res.data.success) {
            this.addDataId = res.data.data
            this.tableDataMe()
          } else {
            this.$message({ type: "error", message: res.data.msg });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      }
},
    /* 
      单元格值更改事件
      changes:[[1, "xczrks", 0, "5"]],行索引，列名称key，原来值，更新值
      source：edit
    */
afterChangeMe(changes, source) {
      if(changes!=null){
        let obj = {}
        this.hotSettings.data.forEach((val, i) => {
            Object.keys(val).forEach(key => {
              if (i==changes[0][0] && key==changes[0][1]) {
                obj.id = this.hotSettings.data[i].ID
                obj.columnName = key
                obj.columnValue = changes[0][3]
              }
            })
        })
        if (obj.id!==undefined&&obj.id!==null&&obj.id!=='ID') {
          this.updateMethod(obj)
        }
      }
},
    //更新值
updateMethod(obj) {
      obj.dataTableId = this.dataTableId
      this.$http
        .post("url",obj).then(res => {
          if (res.data.success) {
            this.tableDataMe()
          } else {
            this.$message({ type: "error", message: res.data.msg });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
},
    //删除当前行
beforeRemoveRowMe(index,amount) {
      if (index<this.tableHeader.length) {
        this.$message({ type: "error", message: '表头不能删除' });
        return false
      }
      var rowId = ''
      this.hotSettings.data.forEach((val, i) => {
        if (i==index) {
          rowId = this.hotSettings.data[i].ID
        }
      })
      this.$http.post("url",{id:rowId,dataTableId:this.dataTableId})
      .then(res => {
          if (res.data.success) {
            this.tableDataMe()
          } else {
            this.$message({ type: "error", message: res.data.msg });
          }
        })
        .catch(function(error) {
          console.log(error);
        });

},