Vue el-table中json缩略展示并美化json格式及气泡框

Vue el-table中json缩略展示并美化json格式及气泡框

先上效果，满意自取

一、用html标签组装json数据

beautifyJson(json) {
      if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
      }
      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replaceAll('{','{
').replaceAll('}','
}').replaceAll(',',',
');
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        let cls = 'number';
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key';
          } else {
            cls = 'string';
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean';
        } else if (/null/.test(match)) {
          cls = 'null';
        }
        return '+ cls + '">' + match + '';
      });
    }

二、修改json样式

三、在el-table中插槽填充代码

      <el-table-column label="参数" align="center" prop="params">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" placement="top">
            <div v-html="beautifyJson(scope.row.params)" slot="content" style="max-width:500px">div>
            <div class="line">{{scope.row.params}}div>
          el-tooltip>
        template>
      el-table-column>