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 && (source === "edit" || source ==="CopyPaste.paste")) {
        for(let j=0;j<changes.length;j++) {
          let obj = {};
          this.hotSettings.data.forEach((val, i) => {
            Object.keys(val).forEach(key => {
              if (i == changes[j][0] && key == changes[j][1]) {
                obj.id = this.hotSettings.data[i].ID;
                obj.columnName = key;
                obj.columnValue = changes[j][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;
      }
      let total = index+amount
      while (index < total) {
        let rowId = "";
        rowId = this.hotSettings.data[index].ID;
        index++;
        this.$http.post("/visualize/hot_table/delete", {
          id: rowId,
          dataTableId: this.dataTableId
        }).then(res => {
          if (res.data.success) {
            this.tableDataMe();
          } else {
            this.confirm(res);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      }
    },
tableDataMe() {
      let arr = [];
      for (let item of this.dragTo) {
        arr.push(item.column);
      }
      this.$http.post("/visualize/table/query_data_table", {
          /* start: this.currentPage,
          pageSize: this.pageSize, */
          dataTableId: this.dataTableId,
          limit: {
            pageNo: this.currentPage,
            pageSize: this.pageSize
          },
          reload: true,
          columnNames: arr,
          query: this.query,
          filters: this.filters[0].columnName != "" ? this.filters : null
        }).then(res => {
          this.total = res.data.data.total;
          this.hotSettings.columns = [];
          this.hotSettings.data = [];
          let hotcoulumns = [];
          for (let item of res.data.data.columnList) {
            if (item != "ID") {
              hotcoulumns.push({
                data: item
              });
            }
          }
          this.hotSettings.columns = this.hotSettings.columns.concat(hotcoulumns);
          let arr1 = [];
          let hotSettingsData = [];
          arr1 = dyadicArrayToJson(res.data.data.columnList, res.data.data.data); //表格数据，在添加和编辑页不显示
          //动态表头
          hotSettingsData = [...this.tableHeader, ...arr1];
          this.hotSettings.data = hotSettingsData;
          setTimeout(() => {
            this.$refs.hot.hotInstance.loadData(this.hotSettings.data); //实时刷新页面数据展示
          }, 0);
          // console.log(this.$refs.hot.hotInstance.getData());

          //this.$refs.hot.hotInstance.getData()拿到的就是页面中的值，页面什么样，数据就是相应的二维数组
          let obj = {
            total: this.total,
            tableHeader: this.tableHeader,
            getData:
              this.$refs.hot != undefined
                ? this.$refs.hot.hotInstance.getData()
                : [],
            mergeCells: this.hotSettings.mergeCells
          };
          this.$emit("saveHotTableData", obj);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    confirm(res) {
      this.$confirm(res.data.msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {})
        .catch(() => {
          return false;
        });
    }

//实时刷新页面数据展示： 

this.$refs.hot.hotInstance.loadData(this.hotSettings.data)