前端展示json格式数组

展示效果

实现

<div class="tab-table">
  <div style="height: 16px"></div>
  <a-collapse style="border: 0" defaultActiveKey="0" accordion>
    <template #expandIcon="props">
      <svg-icon
        style="width: 19px; height: 19px"
        :icon-class="props.isActive ? 'docker-up' : 'docker-down'"
      />
    </template>
    <a-collapse-panel
      v-for="(item, index) in searchList.list"
      :key="index"
      class="titleBox"
    >
      <template slot="header">
        <div class="table-inside">{{ item }}</div>
      </template>
      <VueJsonPretty :data="item"></VueJsonPretty>
    </a-collapse-panel>
  </a-collapse>
</div>

vue-json-pretty@1.7.1组件解析展示JSON格式

import VueJsonPretty from 'vue-json-pretty';

.tab-table {
  margin: 0 16px 15px 16px;
  overflow-x: auto;
  white-space: nowrap;
}
.titleBox {
  background: #f8fbff;
  border: 1px solid #d6e1f0;
  margin-bottom: 13px;
  border-radius: 4px;
  /deep/.ant-collapse-header {
    padding: 0 40px;
  }
}
.table-inside {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 10px;
}