Vue中实现JSON字符串代码格式化

在Vue项目开发，遇到一个需求，需要将JSON代码呈现在页面上，并且是格式化的方式，主要实现方式如下：

<el-input class="json-text" type="textarea" :rows="20" placeholder="请输入内容" v-model="flowJSON"></el-input>

var json = [{ "id": "4c5849f2.4369f8", "type": "tab", "label": "1111", "disabled": false, "info": "" }, { "id": "36205d7f.dd6f92", "type": "random_number", "z": "4c5849f2.4369f8", "name": "random_number", "displayName": "random_number", "min": "0", "max": "500", "topic": "number", "x": 370, "y": 240, "wires": [["cbe495b1.fa9898"]] }, { "id": "ecdd8af1.52eb48", "type": "log", "z": "4c5849f2.4369f8", "name": "log", "displayName": "log", "log_to_console": "true", "log_to_client": "true", "log_to_mem": "false", "x": 830, "y": 240, "wires": [] }, { "id": "cbe495b1.fa9898", "type": "filein", "z": "4c5849f2.4369f8", "name": "filein", "displayName": "filein", "filename": "", "x": 620, "y": 260, "wires": [["ecdd8af1.52eb48"]] }]

// this.flowJSON = JSON.stringify(json, null, "\t")
this.flowJSON = JSON.stringify(json, null, "  ")

经过格式化代码如下：

[
  {
    "id": "4c5849f2.4369f8",
    "type": "tab",
    "label": "1111",
    "disabled": false,
    "info": ""
  },
  {
    "id": "36205d7f.dd6f92",
    "type": "random_number",
    "z": "4c5849f2.4369f8",
    "name": "random_number",
    "displayName": "random_number",
    "min": "0",
    "max": "500",
    "topic": "number",
    "x": 370,
    "y": 240,
    "wires": [
      [
        "cbe495b1.fa9898"
      ]
    ]
  },
  {
    "id": "ecdd8af1.52eb48",
    "type": "log",
    "z": "4c5849f2.4369f8",
    "name": "log",
    "displayName": "log",
    "log_to_console": "true",
    "log_to_client": "true",
    "log_to_mem": "false",
    "x": 830,
    "y": 240,
    "wires": []
  },
  {
    "id": "cbe495b1.fa9898",
    "type": "filein",
    "z": "4c5849f2.4369f8",
    "name": "filein",
    "displayName": "filein",
    "filename": "",
    "x": 620,
    "y": 260,
    "wires": [
      [
        "ecdd8af1.52eb48"
      ]
    ]
  }
]