关于json:vuejsonpretty中自定义key的扩展

40次阅读

共计 1778 个字符，预计需要花费 5 分钟才能阅读完成。

在应用 vue-json-pretty 展现 json 数据时，有时候咱们须要给特定的 key 加一些标注，对其进行一些扩大。
如上面的需要：查问进去的 json 数据，对局部的 key 标注等级，并且点击标注会关上对应的一个页面

对 vue-json-pretty 源码进行批改，采纳的 1.7.1 版本

在 src —> components —> app.vue 中

第 39 到 44 行

<span
      v-if="currentDeep > 1 && !Array.isArray(parentData)"
      class="vjs-key"
      >
    {{prettyKey}}:
</span>

改为

<span
      v-if="currentDeep > 1 && !Array.isArray(parentData)"
      class="vjs-key"
      v-html="keyFormatter(prettyKey)"
/>

第 99 到 104 行

 <span
       v-if="parentData && currentKey && !Array.isArray(parentData)"
       class="vjs-key"
       >
     {{prettyKey}}:
</span>

改为

<span
      v-if="parentData && currentKey && !Array.isArray(parentData)"
      class="vjs-key"
      v-html="keyFormatter(prettyKey)"
/>

在 57 到 78 行的 vue-json-pretty 中增加一个办法
```
:custom-key-formatter="customKeyFormatter"
```

在 methods 办法中增加 keyFormatter

keyFormatter (key) {
    return this.customKeyFormatter
        ? this.customKeyFormatter(key, this.path)
    : `${key}:`
},

在 props 中增加 customKeyFormatter

customKeyFormatter: {
    type: Function,
      default: null
},

以上改完后就能够通过 npm run build 办法打包资源，打包资源前得先 npm i 装置对应的依赖

// 引入组件
import VueJsonPretty from '@/../public/changedNodeModules/vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
// 注册组件
components: {VueJsonPretty,}

<!-- 应用组件 -->
<VueJsonPretty :path="'res'" :data="executeResult" :custom-key-formatter="customKeyFormatter" />

executeResult 是 json 数据；customKeyFormatter 是对 key 自定的函数

customKeyFormatter(key, path) {
    // key 是须要自定义的 key；path 是 key 对应的门路，到时打印进去就晓得了
    // 有时候须要对 path 依据后盾给定的数据进行解决
    const np = path.replace(/\[.*?]/g, '').replace(/^(res.)(hits.)+(_source.)+/g,'');
    const l = this.leave[np];
    if (l) {const ll = l.split('@');
        let color;
        switch (ll[0]) {
            case 'S1':
                color = '#409eff';
                break;
            case 'S2':
                color = '#e6a23c';
                break;
            case 'S3':
            case 'S4':
            case 'S5':
                color = '#FF4949';
                break;
        }
        // 依据门路自定义 key 
        return `${key}<a target="_blank" href="${ll[1]}" style="user-select:none;background: ${color};color: #fff; padding: 0 4px; font-weight: bolder">${ll[0]}</a> :`;
    } else {return key + ':';}
},