话不多说，来张效果图：

vuejsonviewer_4">实现方式是安装vue-json-viewer插件，实现步骤如下：

vuejsonviewer_5">1、安装vue-json-viewer

javascript">npm install vue-json-viewer --save

vuejsonviewer_11">2、main.js引入vue-json-viewer

javascript">import JsonViewer from 'vue-json-viewer'

vuejsonviewerJson_18">3、利用vue-json-viewer展示Json树

javascript"><template>
  <div class="json_box">
	<!--绑定数据源treedata; expand-depth:默认展开的层级(默认1); copyable：展示复制按钮（默认false);   -->
	<!-- sort:按照key排序展示（默认false); boxed:为组件添加一个盒样式（默认false) -->
    <json-viewer
      :value="treedata"
      :expand-depth=5
      copyable
      boxed
      sort></json-viewer>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer';
export default {
  data() {
    return {
      // 定义数据源
      treedata:[{
        name: '本科发展方向',
        children: [
          {
            name: '深造学习',
            children: [
              {
                name: '研究生',
              }
            ]
          },
          {
            name: '直接就业',
          }
        ]
      }],
    }
  },
}
</script>

<style>
.json_box{
  width: 1000px;
  margin: auto;
  margin-top: 35px;
}
</style>

说在最后，最最重要的！！vue-json-viewer只能展示不可编辑！！！！我也是安装完才发现，欸，本来是想用于后台json树增删改的。不过一个优秀的程序员不能被这点小困难打倒，所以我又发现了另一个解决方案jsonlint+codemirror，详情见我另一篇博客！