Vue 的 JSON 格式数据与树形(Tree)结构数据转换的插件

1、vue-json-pretty

文档：

https://www.npmjs.com/package/vue-json-pretty

安装：

npm install vue-json-pretty --save

使用：

<template>
  <div>
    <vue-json-pretty :path="'res'" :data="jsonData"></vue-json-pretty>
  </div>
</template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  components: {
    VueJsonPretty,
  },
  data(){
    return{
      jsonData: { // 这里是测试数据，若后端给的是字符串形式的 JSON ，可以通过 JSON.parse() 方法转换成 JSON 格式
                    "测试属性": "123",
                    "测试数组1": [
                        {
                            "key1": "123",
                            "key2": "456"
                        }
                    ],
                    "测试数组2": [
                        1,
                        2,
                        3
                    ],
                    "第一层数组": [
                        {
                            "第二层数组": [
                                {
                                    "第三层数组": {
                                        "最后是一个对象": "bulu"
                                    }
                                }
                            ]
                        }
                    ]
                }
    }
  }
};
</script>

效果图（成对括号有对齐线，数据类型不同颜色标识，点击括号可展开和收缩）：

2、vue-json-viewer

文档：

https://www.npmjs.com/package/vue-json-viewer

安装：

npm install vue-json-viewer --save

使用：

<template>
  <div>
    <json-viewer :value="jsonData"></json-viewer>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer';
import 'vue-json-viewer/style.css';

export default {
  components: {
    JsonViewer,
  },
  data(){
    return{
      jsonData: { // 这里是测试数据，若后端给的是字符串形式的 JSON ，可以通过 JSON.parse() 方法转换成 JSON 格式
                    "测试属性": "123",
                    "测试数组1": [
                        {
                            "key1": "123",
                            "key2": "456"
                        }
                    ],
                    "测试数组2": [
                        1,
                        2,
                        3
                    ],
                    "第一层数组": [
                        {
                            "第二层数组": [
                                {
                                    "第三层数组": {
                                        "最后是一个对象": "bulu"
                                    }
                                }
                            ]
                        }
                    ]
                }
    }
  }
};
</script>

效果图（数据类型不同颜色标识，点击括号前的标识按钮可展开和收缩，收缩数据以省略号来标识）：

3、jsoneditor -> 推荐的可编辑操作 JSON 格式数据与树形(Tree)结构数据的插件

文档：

https://github.com/josdejong/jsoneditor

在线操作地址：

https://jsoneditoronline.org/

安装：

npm install jsoneditor --save

使用：

<template>
  <div>
    <div id="info" style="height: 600px;width: 835px" />
  </div>
</template>

<script>
import JSONEditor from 'jsoneditor';
let editorInfo = null;

export default {
  components: {
    JsonViewer,
  },
  data(){
    return{
      jsonData: { // 这里是测试数据，若后端给的是字符串形式的 JSON ，可以通过 JSON.parse() 方法转换成 JSON 格式
                    "测试属性": "123",
                    "测试数组1": [
                        {
                            "key1": "123",
                            "key2": "456"
                        }
                    ],
                    "测试数组2": [
                        1,
                        2,
                        3
                    ],
                    "第一层数组": [
                        {
                            "第二层数组": [
                                {
                                    "第三层数组": {
                                        "最后是一个对象": "bulu"
                                    }
                                }
                            ]
                        }
                    ]
                }
    }
  },
  mounted(){
    this.init();
  },
  methods: {
	init(){ // 初始化数据渲染区域
	  const infoElement = document.getElementById('info');
	  editorInfo = new JSONEditor(infoElement, {
        mode: 'code', // JSON 格式数据
        // mode: 'tree', // 树形结构数据
        indentation: 4,
        mainMenuBar: false,
        onEditable: function({ path, field, value }) {
          return false; // false 为只读，true 为读写
        }
      });
	  editorInfo.set(this.jsonData);
	}
  }
};
</script>

效果图（操作性全面，自行尝试体会。。。）：

4、JsonView 组件树形结构数据格式化

JsonView 组件下载放到 components/common/ 底下，组件源码下载地址：

https://download.csdn.net/download/weixin_41856395/19451029

引入并使用：

<template>
  <div>
    <JsonView :json="jsonData"></JsonView>
  </div>
</template>

<script>
import JsonView from '@/components/common/jsonView'; // 引入组件

export default {
  components: {
    JsonView,
  },
  data(){
    return{
      jsonData: { // 这里是测试数据，若后端给的是字符串形式的 JSON ，可以通过 JSON.parse() 方法转换成 JSON 格式
                    "测试属性": "123",
                    "测试数组1": [
                        {
                            "key1": "123",
                            "key2": "456"
                        }
                    ],
                    "测试数组2": [
                        1,
                        2,
                        3
                    ],
                    "第一层数组": [
                        {
                            "第二层数组": [
                                {
                                    "第三层数组": {
                                        "最后是一个对象": "bulu"
                                    }
                                }
                            ]
                        }
                    ]
                }
    }
  }
};
</script>

效果图（成对括号有对齐线，键值颜色区分，点击括号可展开和收缩，收缩的有注释统计数量）：

这是我本人在工作学习中做的一些总结，同时也分享出来给需要的小伙伴哈 ~ 供参考学习，有什么建议也欢迎评论留言，转载请注明出处哈，感谢支持！