Front-end formatted display json data can be folded and expanded----vue-json-viewer

Not much to say, here is an effect picture:

The implementation method is to install the vue-json-viewer plug-in, the implementation steps are as follows:

1. Install vue-json-viewer

npm install vue-json-viewer --save

2. Main.js introduces vue-json-viewer

import JsonViewer from 'vue-json-viewer'

3. Use vue-json-viewer to display the Json tree

<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>

In the end, the most important thing! ! vue-json-viewer只能展示不可编辑! ! ! ! I also found out after the installation, hey, I originally wanted to add, delete and modify the json tree in the background. But a good programmer can't be defeated by this little difficulty, so I found another solution jsonlint + codemirror , see my other blog for details!