Vue实现json数据格式显示，可折叠隐藏展示

效果展示

服务器端获取的json数据（也可以自行设置json的数据）

{"total":1,"rows":[{"searchValue":null,"createBy":null,"createTime":"2021-08-30 17:33:17","updateBy":null,"updateTime":null,"remark":"sa","params":{},"id":37,"name":"erw","projectId":null,"groupId":53,"url":"asdf/fgh","httpMethod":"post","apiVersion":null,"sort":null,"status":"2","paramText":"{\"baseUrl\":\"\",\"param\":{\"afterinject\":{\"mode\":0,\"code\":\"asdf\"},\"beforeinject\":{\"mode\":0,\"code\":\"asdf\"},\"query\":[{\"name\":\"asd\",\"must\":1,\"remark\":\"asdf\",\"value\":\"\"},{\"name\":\"asdf\",\"type\":0,\"must\":1,\"remark\":\"asd\"},{\"name\":\"\",\"type\":0,\"must\":0,\"remark\":\"\"}],\"header\":[{\"name\":\"Content-Type\",\"value\":\"application/json\",\"remark\":\"asd\"},{\"name\":\"Accept-Encoding\",\"value\":\"application/x-www-form-urlencoded\",\"remark\":\"asd\"},{\"name\":\"\",\"value\":\"\",\"remark\":\"\"}],\"bodykeyvalue\":[{\"name\":\"sdf\",\"type\":0,\"must\":1,\"remark\":\"sa\",\"value\":\"\"},{\"name\":\"\",\"type\":0,\"must\":0,\"remark\":\"\"}],\"bodyraw\":{\"type\":1,\"rawType\":2,\"rawTextRemark\":\"\",\"rawFileRemark\":\"\",\"rawText\":\"\",\"rawJSON\":[{\"name\":\"asdf\",\"must\":1,\"type\":0,\"remark\":\"asdf\",\"show\":1,\"mock\":\"\",\"drag\":1},{\"name\":\"asdf\",\"must\":1,\"type\":3,\"remark\":\"fasf\",\"show\":1,\"mock\":\"\",\"drag\":1,\"data\":[{\"must\":1,\"type\":0,\"remark\":\"asde\",\"show\":1,\"mock\":\"\",\"drag\":1}]}],\"rawJSONType\":0},\"resultjson\":[{\"must\":0,\"type\":0,\"remark\":\"asdf\",\"show\":0,\"mock\":\"\",\"drag\":1}],\"resultraw\":{\"type\":0,\"rawRemark\":\"\",\"rawMock\":\"\",\"jsonType\":1}},\"groupId\":53,\"name\":\"erw\",\"httpmethod\":\"post\",\"remark\":\"sa\",\"id\":37,\"url\":\"asdf/fgh\",\"status\":\"2\"}","interfaceHttpParamList":[],"interfaceHttpHeaderList":[]}],"code":200,"msg":"查询成功"}

页面显示效果

可以折叠隐藏

具体实现

安装插件 vue-json-viewer

$ npm install vue-json-viewer --save

全局配置挂载（main.js文件中）

import JsonViewer from 'vue-json-viewer'

Vue.use(JsonViewer)

在页面中具体使用，：value值绑定json格式数据

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

data: function () {
    return {
      jsonData:'(上述的json代码)'
    };
  },

当然也可以对应的样式操作

<json-viewer
  :value="jsonData"
  :expand-depth=5
  copyable
  boxed
  sort>
</json-viewer>

相关属性