当前位置：首页 > article >正文

简单获取json预览

article 2025/2/9 0:21:25

data: JSON 数据。
collapsedNodeLength: 对象或数组的长度超过此阈值时会折叠
deep: json路径深度超过此值时会折叠
showLineNumber: 显示左侧行号
showIcon: 显示图标。
virtual: 使用虚拟滚动
height: 使用虚拟滚动时列表的高度
itemHeight: 使用虚拟滚动时节点的高度
editable：json 是否可以编辑

<template>
  <div class="viewInvoiceDialog">
    <t-base-dialog
      v-if="dialogShow"
      title="预览"
      @closeDialog="closeDialog"
      :dialogVisible="dialogShow"
      :center="false"
      :showSubmitButton="false"
      :showCancelButton="false"
      width="50%"
    >
      <div>
        <vue-json-pretty
          :deep="3"
          :showSelectController="true"
          :highlightMouseoverNode="true"
          path="res"
          :data="collection"
          :height="700"
          :virtual="true"
          :show-icon="true"
          :editable="false"
          :show-line-number="true"
        >
        </vue-json-pretty>
      </div>
    </t-base-dialog>
  </div>
</template>
<script setup>
import TBaseDialog from "@/components/base-dialog/index.vue";
import { ref, reactive } from "vue";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";
/**
 * 初始化值
 */
const dialogShow = ref(false);
const collection = ref(null);
// 打开弹框
const showDialog = (data) => {
  collection.value = { ...data };
  dialogShow.value = true;
};
//关闭弹框
const closeDialog = () => {
  dialogShow.value = false;
};
// 暴露方法
defineExpose({ showDialog });
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
  .el-dialog__footer {
    border-top: none;
    padding: 0;
  }
}
</style>

查看全文

http://www.kler.cn/a/417257.html