handsontable 中使用 vue-json-editor

一、需求：点击 handsontable 列类型为 json 的单元格 -> 弹出 json 编辑器进行编辑保存

二、核心代码：

1、点击单元格，弹出弹框 — table.vue文件

<hot-table:settings="hotSettings" :columns="columns"/>

<JsonEditorDialog
     v-if="showJsonEditorDialog"
     :visible="showJsonEditorDialog"
     @cancel="cancelJsonEditorDialog"
     @ok="okJsonEditorDialog"
     :value="currentCellData" />

<script>
import JsonEditorDialog from './json_editor_dialog.vue'

export default {
   components: {
       JsonEditorDialog
   },
   data(){
       return {
           showJsonEditorDialog: false, // 是否显示 JSON 编辑器弹框
           currentCellData: undefined, // 当前操作的单元格数据
           currentSelectRow: undefined, // 当前操作的单元格数据 行号
           currentSelectCol: undefined, // 当前操作的单元格数据 列号
       }

   },
   mounted(){
       this.init()
   },
   methods: {
       // 取消 - JSON 编辑器弹框
       cancelJsonEditorDialog() {
         this.showJsonEditorDialog = false
       },

       // 保存 - JSON 编辑器弹框
       async okJsonEditorDialog(data) {
         this.showJsonEditorDialog = false // 隐藏 JSON 编辑器弹框

         // JSON 编辑器中的数据
         const updateCells = [
           {
             col_index: this.currentSelectCol - 1,
             row_index: this.currentSelectRow,
             value: JSON.stringify(data)
           }
         ]

         // 将 JSON 编辑器中的数据传入后台
         const res = await tableApi.commitOp(
           update_cells: updateCells
         )

         if (res.data.error) this.$message.error('操作失败')
         this.$message.success('操作成功')
         this.fetchData() // 刷新表格数据
       },

       // handsontable 钩子
       addHook() {
         this.hotInstance.addHook('afterOnCellMouseDown', this.afterOnCellMouseDown.bind(this))
       },

       // 点击单元格钩子
       afterOnCellMouseDown(event, coords, TD) {
         const col_type = this.columns[col].value_type // 当前单元格的类型
         this.currentSelectRow = coords.row // 当前单元格所在的行
         this.currentSelectCol = coords.col // 当前单元格所在的列

         // 判断是否是 json 类型的列
         if (coords.row !== -1 && col_type === 'json') {

           this.showJsonEditorDialog = true


           // 获取当前单元格数据
           this.currentCellData = this.hotInstance.getDataAtCell(this.currentSelectRow, this.currentSelectCol)
         }
       },

       // 页面初始化
       init(){
           this.addHook()
           this.fetchData()
           ....
       },

       // 获取表格数据
       fetchData(){...},
   }

}
</script>

2、json 编辑器弹框代码 — json-editor-dialog.vue

<template>
  <div class="json-editor-dialog">
    <a-modal :visible="visible" title="JSON编辑" @ok="onOk" @cancel="onCancel" width="900px" class="json-editor-dialog-modal">
      <vue-json-editor v-model="jsonContent" :show-btns="false" mode="tree" lang="zh" :expandedOnStart="false" @json-change="jsonChange" @json-save="jsonSave" @has-error="hasError"></vue-json-editor>
    </a-modal>
  </div>
</template>

 <script>
 import vueJsonEditor from 'vue-json-editor'
 import '@/styles/jsoneditor.css'

 export default {
   components: { vueJsonEditor },
   props: {
     visible: {
       type: Boolean
     },
     value: {
       type: String
     }
   },
   data() {
     return {
       jsonContent: {}
     }
   },
   mounted() {
     this.init()
   },
   methods: {
     // 是否是 JSON
     isJosn(str) {
       if (typeof str == 'object' && str) {
         return true
       }

       if (typeof str == 'string') {
         try {
           var obj = JSON.parse(str)
           if (typeof obj == 'object' && obj) return true

           return false
         } catch (e) {
           return false
         }
       }
     },

     // 初始化
     init() {
       this.jsonContent = JSON.parse(this.value)
     },

     // 保存
     save() {
       if (!this.isJSON(this.jsonStr)) {
         this.$message.error(`json格式错误`)
         return false
       }
       this.$message.success('json格式正确')
     },

     // 点击弹框的 确定按钮
     onOk() {
       this.save()
       this.$emit('ok', this.jsonContent)
       console.log('ok', this.jsonContent)
     },

     // 点击弹框的 取消按钮
     onCancel() {
       console.log('cancel')
       this.$emit('cancel')
     },

     // json 数据改变
     jsonChange() {
       console.log('json change')
     },

     // json 数据保存
     jsonSave() {
       console.log('json save')
     },

     // json 数据错误
     hasError() {
       console.log('has error')
     }
   }
 }
 </script>