• data:  JSON 数据。

• collapsedNodeLength: 对象或数组的长度超过此阈值时会折叠

• deep: json路径深度超过此值时会折叠

• showLineNumber: 显示左侧行号

• showIcon: 显示图标。

• virtual: 使用虚拟滚动

• height: 使用虚拟滚动时列表的高度

• itemHeight: 使用虚拟滚动时节点的高度

• editable：json 是否可以编辑

<template><div class="viewInvoiceDialog"><t-base-dialogv-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>