vue操作日志-json可视化样式

效果：

代码：

<template>
  <PageWrapper>
    <PageContentWrapper>
      <el-form :inline="true" ref="form" :model="filterParams" class="demo-form-inline">
        <el-form-item label="选择操作模块">
          <el-select
            v-model="filterParams.moduleType"
            filterable
            clearable
            placeholder="请选择"
            >
            <el-option
              v-for="item in moduleOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            @change="setTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="timeInterVal"
            type="daterange"
            clearable
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model.trim="filterParams.keyWord" clearable placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- table -->
      <el-card shadow="nerver" class="base-table">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          stripe
          border
          style="width: 100%">
          <el-table-column prop="id" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="moduleTypeName" label="操作模块" width="200" align="center"></el-table-column>
          <el-table-column prop="targetName" label="操作对象" align="center"></el-table-column>
          <el-table-column label="修改前" width="300" align="center">
            <template slot-scope="{ row }">
              <el-popover
                placement="top"
                trigger="hover">
                <pre class="handleLog-pre" v-html="getJson(row.oldJson)"></pre>
                <div class="record-text" slot="reference">{{row.oldJson}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="修改后" width="300" align="center">
            <template slot-scope="{ row }">
              <el-popover
                placement="top"
                trigger="hover">
                <pre  class="handleLog-pre" v-html="getJson(row.json)"></pre>
                <div class="record-text" slot="reference">{{row.json}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="操作人" width="180" align="center"></el-table-column>
          <el-table-column prop="createAt" label="操作时间" width="200" align="center"></el-table-column>
          <el-table-column prop="operationTypeName" label="操作类型" width="180" align="center"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.current"
          :page-size="pagination.size"
          layout="total, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </el-card>
    </PageContentWrapper>
  </PageWrapper>
</template>
<script>
import enterKeyCbMixins from '@/mixins/enterKeyCbMixins.js'
export default {
  mixins: [enterKeyCbMixins],
  data() {
    return {
      filterParams: {
        moduleType: '',
        startTime: '',
        endTime: '',
        keyWord: ''
      },
      timeInterVal: [],
      moduleOptions: [],
      pagination: { // 分页器信息
        total: 1,
        current: 1,
        size: this.$store.state.defaultPageSize
      },
      tableData: [],
      tableLoading: false
    }
  },
  mounted() {
    this.queryTable()
    this.getOptions()
  },
  methods: {
    getJson(val) {
      let json = ''
      if (val) {
        try {
          let obj = {}
          obj = typeof (val) === 'object' ? val : JSON.parse(val)
          json = JSON.stringify(obj, null, 4)
          return this.syntaxHighlight(json)
        } catch (err) {
          json = val
          return json
        }
      }
    },
    // 高亮处理json
    syntaxHighlight(json) {
      if (typeof json !== 'string') {
        json = JSON.stringify(json, undefined, 2)
      }
      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
        var cls = 'jsonnumber'
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'jsonkey'
          } else {
            cls = 'jsonstring'
          }
        } else if (/true|false/.test(match)) {
          cls = 'jsonboolean'
        } else if (/null/.test(match)) {
          cls = 'jsonnull'
        }
        return '<span class="' + cls + '">' + match + '</span>'
      })
    },
    //
    getOptions() {
      this.$api.system.moduleList().then(res=>{
        this.moduleOptions = res
      })
    },
    // 设置时间
    setTime(timeArr) {
      if (timeArr) {
        this.filterParams.startTime = timeArr[0]
        this.filterParams.endTime = timeArr[1]
      } else {
        this.filterParams.startTime = ''
        this.filterParams.endTime = ''
      }
    },
    handleQuery() {
      this.pagination.current = 1
      this.queryTable()
    },
    // 页码改变触发
    handleCurrentChange() {
      this.queryTable()
    },
    queryTable() {
      const param = Object.assign({}, { projectId: this.projectId }, this.pagination, this.filterParams)
      delete param.total
      this.tableLoading = true
      let getDataFn = this.$api.system.handleLog(param)
      this.$minLoadingTime(getDataFn).then((res)=>{
        const resData = res[0]
        this.tableData = resData.item
        this.pagination.total = resData.total
        this.pagination.current = resData.current
      }).finally(()=>{
        this.tableLoading = false
      })
    }
  }
}
</script>
<style>
.record-text{
  width: 280px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.handleLog-pre { padding: 5px 10px; margin: 5px; word-break:break-all;max-height: 500px;overflow: auto;max-width:800px;}
.jsonstring { color: #3ab54a; }
.jsonnumber { color: #25aae2; }
.jsonboolean { color: blue; }
.jsonnull { color: #f1592a; }
.jsonkey { color: #92278f; }
</style>

数据格式：