vue 展示 json，节点可展开，可收缩

第一步：添加包

yarn add vue-json-viewer

 

第二步：加入components

components: {
  JsonViewer,
},

 

第三步：添加div

<div v-if="showJson">
  <json-viewer
    :value="jsonData"
    :expand-depth="3"
    copyable
    boxed
    sort
  >
  </json-viewer>
</div>

 

第四步：控制给数据赋值并控制框是否展示

getData() {
  const params = {
    id: this.queryForm.id,
};
queryId(params).then((response) => {
    if (response.status === 200) {
      this.jsonData = response.data;
      this.showJson = !this.showJson;
} else {
      this.$message.warning('请求失败', 'warning');
}
  });
},