vue插件 JSON 数据树形展示插件

vue-json-pretty

• 文档 https://github.com/leezng/vue-json-pretty/blob/HEAD/README.zh-CN.md
• https://www.npmjs.com/package/vue-json-pretty

<template>
  <div class="json-view">
    <el-dialog
      title="数据展示"
      :visible="dialogVisible"
      width="50%"
      @close="handleCancel"
    >
      <div style="height: 600px; overflow: auto;">
        <vue-json-pretty
          :path="'res'"
          :data="app.componentList"
          :deep="3"
          :highlight-mouseover-node="true"
          :show-select-controller="true"
          :show-length="true"
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleCancel">取 消</el-button>
        <el-button
          v-clipboard:copy="JSON.stringify(app.componentList)"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          size="mini"
          type="success"
        >
          复 制
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import VueJsonPretty from 'vue-json-pretty'
export default {
  name: 'JsonView',
  inject: ['app'],
  components: {
    VueJsonPretty
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCancel() {
      this.$emit('update:dialogVisible', false)
    },

    onCopy(e) {
      this.$message.success('JSON数据复制成功，请自行转换。')
    },

    onError() {
      this.$message({ type: 'warning', message: '复制失败' })
    }
  }
}
</script>

vue-json-viewer

• 文档 https://github.com/chenfengjw163/vue-json-viewer/blob/master/README_CN.md
• https://www.npmjs.com/package/vue-json-viewer