vue.js 实现导入json解析成动态el-table树表格（接口文档功能）

一、需求描述：前段时间接到一个需求是做一个类似接口文档的显示功能，将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系，用element组件的树表格的形式展示，并且可以手动新增、修改和删除某个数据字段。

二、界面展示：功能如下图所示：

1.未贴数据之前：

2.点击右上角的‘导入json'，在打开的弹框中贴入如下json数据：{"name":"lemon","sex":"女","age":18,"hobby":{"hobby1":"敲代码","hobby2":"跳恰恰"},"likeArr":["水果","青菜"]}

3.点击确认后树表格自动展示贴入的json数据，如下图所示；

4.点击每行的最右侧可以进行新增和删除操作；

5.点击tab切换到预览展示效果：

三、代码实现：

1. 弹框代码展示，新建一个jsonDialog.vue文件，MonacoEditor是一个json编辑器，实现以下代码：

1. MonacoEditor是一个json编辑器,在components文件夹下新建MonacoEditor文件夹，MonacoEditor组件实现如下：

2. 新建utils/monaco-editor.js，实现以下代码：

const colType = { Object, Array }

export function getJsonPath(text, offSet) {
  let pos = 0
  const stack = []
  let isInKey = false

  while (pos < offSet) {
    const startPos = pos
    switch (text[pos]) {
      case '"':
        const { text: s, pos: newPos } = readString(text, pos)
        if (stack.length) {
          const frame = stack[stack.length - 1]
          if (frame.colType === colType.Object && isInKey) {
            frame.key = s
            isInKey = false
          }
        }
        pos = newPos
        break
      case '{':
        stack.push({ colType: colType.Object })
        isInKey = true
        break
      case '[':
        stack.push({ colType: colType.Array, index: 0 })
        break
      case '}':
      case ']':
        stack.pop()
        break
      case ',':
        if (stack.length) {
          const frame = stack[stack.length - 1]
          if (frame.colType === colType.Object) {
            isInKey = true
          } else {
            frame.index++
          }
        }
        break
    }
    if (pos === startPos) {
      pos++
    }
  }
  return pathToString(stack)
}

function pathToString(path) {
  let s = '$'
  try {
    for (const frame of path) {
      if (frame.colType === colType.Object) {
        if (!frame.key.match(/^[a-zA-Z$_][a-zA-Z\d$_]*$/)) {
          const key = frame.key.replace('"', '\\"')
          s += `["${frame.key}"]`
        } else {
          if (s.length) {
            s += '.'
          }
          s += frame.key
        }
      } else {
        s += `[${frame.index}]`
      }
    }
    return s
  } catch (ex) {
    return ''
  }
}

function isEven(n) {
  return n % 2 === 0
}

function readString(text, pos) {
  let i = pos + 1
  i = findEndQuote(text, i)
  const textpos = {
    text: text.substring(pos + 1, i),
    pos: i + 1
  }
  return textpos
}

// Find the next end quote
function findEndQuote(text, i) {
  while (i < text.length) {
    // console.log('findEndQuote: ' + i + ' : ' + text[i])
    if (text[i] === '"') {
      let bt = i
      // Handle backtracking to find if this quote is escaped (or, if the escape is escaping a slash)
      while (bt >= 0 && text[bt] == '\\') {
        bt--
      }
      if (isEven(i - bt)) {
        break
      }
    }
    i++
  }
  return i
}

export function checkJsonCode(strJsonCode) {
  let res = ''
  try {
    for (let i = 0, j = 0, k = 0, ii, ele; i < strJsonCode.length; i++) {
      ele = strJsonCode.charAt(i)
      if (j % 2 === 0 && ele === '}') {
        // eslint-disable-next-line no-plusplus
        k--
        for (ii = 0; ii < k; ii++) ele = `    ${ele}`
        ele = `\n${ele}`
      } else if (j % 2 === 0 && ele === '{') {
        ele += '\n'
        // eslint-disable-next-line no-plusplus
        k++
        for (ii = 0; ii < k; ii++) ele += '    '
      } else if (j % 2 === 0 && ele === ',') {
        ele += '\n'
        for (ii = 0; ii < k; ii++) ele += '    '
        // eslint-disable-next-line no-plusplus
      } else if (ele === '"') j++
      res += ele
    }
  } catch (error) {
    res = strJsonCode
  }
  return res
}

2. 界面代码展示，新建一个jsonIndex.vue界面，实现以下代码：

    
返回参数
    
        
        
    
    

        
 添加 
        
 导入json 
        
            
                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                
            
            
                

                    
                    
                
            
        
    
  
//弹框

3. 展示界面jsonIndex.vue的功能代码，对导入json的展示及相关操作的实现：

4. 展示界面jsonIndex.vue的相关样式代码如下：

综上所述，已经完成了json数据的展示、修改和新增删除都已经完成，可能有些错误，欢迎大家指正~