`

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

    博客分类:
  • vue
vue 
阅读更多

第一步:添加包

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');
}
  });
},
分享到:
评论

相关推荐

    基于vue2.x+antdesign+antv x6实现的流程图编辑器.zip

    总的来说,这个项目展示了如何结合Vue2.x的灵活性和AntV X6的强大图表能力,构建一个功能完善的流程图编辑器,不仅能满足基本的绘图需求,还能提供丰富的交互体验。这样的工具在业务流程管理、系统设计、工作流定义...

    前端必备的谷歌浏览器JSON可视化插件:JSON-Handle

    3. **树形视图**:以树形图的方式展示JSON数据,每个键值对都以节点的形式呈现,可以方便地展开和收缩,这样可以一目了然地查看复杂的JSON对象结构。 4. **性能优化**:考虑到JSON数据可能很大,JSON-Handle优化了...

    基于vue20实现的级联选择器

    5. **样式设计**:在 `style` 部分,我们可以使用 CSS 或预处理器(如 SCSS)来定制组件的外观,包括选中状态、展开收缩动画等。 6. **父子组件通信**:如果级联选择器是其他组件的一部分,我们需要通过自定义事件...

    系统中的菜单tree节点代码

    这可能涉及到递归遍历节点,为每个节点创建相应的DOM元素,并处理展开、收缩、选中等交互事件。 3. **事件处理**:为tree节点添加事件监听器,如点击事件,以便当用户选择某个节点时执行相应的操作,如打开新的页面...

    树菜单的基本实现

    在树菜单中,点击某个节点时,可能会展开或收缩其子节点,或者显示与该节点相关的操作菜单,如编辑、删除、添加等。 3. **数据交互**: 树菜单实现了数据和用户之间的交互。当用户选择、展开或折叠节点时,这些...

    树形结构ssh+mysql+json

    用户对菜单的操作(如展开、收缩、添加新节点、删除节点等)会触发AJAX请求,与后台进行异步通信,更新数据并同步显示。 总结来说,"树形结构ssh+mysql+json"是一个利用SSH框架、MySQL数据库和JSON数据格式,实现...

    d3+jQuery类似天眼查企查查的股权穿透图代码.zip

    5. 交互设计:添加鼠标悬停、点击等交互功能,比如点击节点可以展开或收缩其下属的子节点,揭示更详细的股权结构。 6. 动画效果:利用d3.js和jQuery的动画功能,实现平滑的过渡效果,提升用户体验。 对于开发者而言...

    树形菜单DTree使用小记

    2. **可扩展性**:DTree可以与其他库(如jQuery、React、Vue等)结合,实现更复杂的交互效果。 3. **自定义样式**:通过CSS自定义节点的样式,适应不同的UI设计需求。 4. **优化性能**:通过缓存、懒加载等技术优化...

    树型菜单AJAX实现

    每个节点通常包含一个标题,可展开或折叠,显示或隐藏其子节点。 3. **动态加载** 使用AJAX,我们可以根据用户的交互(如点击节点)动态地从服务器获取子节点数据。这样,初始页面加载时只加载根节点,减少了首屏...

    伸缩树形菜单+树状菜单

    这两种菜单形式提供了良好的用户体验,用户可以通过展开和收缩节点来查看或隐藏子菜单项。 伸缩树形菜单是一种动态显示菜单的方式,它允许用户通过点击节点来展开或折叠其子菜单。这种菜单在页面空间有限时特别有用...

    部门或人员下拉框树形

    5. 搜索功能:可选地,提供搜索框,让用户通过输入关键词快速查找目标节点。 6. 动态加载:如果组织结构庞大,可以采用懒加载策略,只在用户首次展开某个节点或滚动到可视区域时加载其子节点,以提高性能。 通过...

    用Ajax实现jsp页面树状结构

    8. **交互体验**:为了提供更好的用户体验,可以添加动画效果,如淡入淡出、滑动等,使得树节点的展开和收缩更为平滑。 在实际开发中,可能还需要考虑其他因素,如权限控制、节点状态的持久化、搜索功能等。此外,...

    js生成的树形菜单。。

    - **树形菜单**:在网页中,树形菜单以折叠/展开的形式显示多级目录或选项,用户可以通过点击来展开或收缩子菜单。 2. **实现方式**: - **HTML 结构**:首先,需要创建一个基础的HTML结构,通常使用`&lt;ul&gt;`和`...

    JavaScript+Ajax实现树形目录

    每个节点可以有多个子节点,形成一个可展开和折叠的层次结构。在网页中,树形目录通过HTML元素如`&lt;ul&gt;`和`&lt;li&gt;`来构建,利用CSS进行样式控制,而JavaScript则负责处理用户的交互,如点击节点时的展开和收缩效果。 *...

    树形结构的多种实现,其中有Ajax异步实现

    同时,前端需要处理数据并生成相应的DOM结构,实现节点的展开和收缩。 总结起来,树形结构在软件开发中扮演着重要的角色,尤其在表示层级关系时。Ajax异步加载的树形菜单是提高用户体验的有效手段,它结合了前端和...

    Javascript 树型结构集合

    1. **dtree(动态树)**:dtree是一种动态生成的JavaScript树形控件,允许用户交互地展开和折叠节点。它基于HTML和CSS,通常使用DOM操作来创建和管理树结构。用户可以通过点击节点进行展开和收缩,还可以添加、删除...

    js 点击切换和点击伸缩

    这个例子适用于简单的静态结构,如果导航条是动态生成或者更复杂,可能需要使用到更高级的库,如jQuery或者现代前端框架(如React、Vue、Angular)。 树状导航条是一种组织大量层次化信息的有效方式。它通常由节点...

    仿汽车树形菜单,有数据

    1. **树形菜单的概念**:树形菜单是基于树状结构的数据展示方式,每个节点代表一个菜单项,可以有子节点或父节点,通过展开和折叠来显示或隐藏子级菜单,便于用户浏览和选择多层次的信息。 2. **HTML与CSS**:在...

    左侧通用js菜单树

    菜单树,顾名思义,是一种以树状结构展示信息的控件,它允许用户通过展开和折叠节点来浏览多级层次的数据。将js与菜单树相结合,我们就得到了一种动态的、响应式的菜单系统,能够根据用户的操作实时更新显示。 在...

    Treegrid 编码

    Treegrid编码是一个在Web开发中常见的数据展示方式,它结合了树形结构和表格的特点,使得数据层次清晰、可展开收缩,并且支持排序、筛选等操作。在网页中,Treegrid常用于展示具有层级关系的数据,如组织架构、文件...

Global site tag (gtag.js) - Google Analytics