Vue el-table中json缩略展示并美化json格式及气泡框_el-tabel中如何点击输入框弹出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('{','{<br>').replaceAll('}','<br>}').replaceAll(',',',<br>');
      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 '<span class="' + cls + '">' + match + '</span>';
      });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

二、修改json样式

<style scoped>
.line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/deep/ .string {
  color: green;
}

/deep/ .number {
  color: darkorange;
}

/deep/ .boolean {
  color: blue;
}

/deep/ .null {
  color: magenta;
}

/deep/ .key {
  color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

三、在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>
1
2
3
4
5
6
7
8
9