将json数据格式化的显示在页面中

显示格式化的数据首先要是用pre标签否则不识别换行空格字符,样式设置white-space: pre,设置缩进

方法1.

<pre id="infoDiv3" style="white-space: pre">
</pre>

在页面中直接使用

<el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="50%"
           >
            <pre id="infoDiv3" style="white-space: pre">
            </pre>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</el-dialog>

插入数据

deResponse(info) {         
      let mess =  JSON.stringify(info,null, 2);
      $('#infoDiv3').html(mess);
      this.dialogVisible = true;          
},

 方法2:方法1中有些问题,第一有数据无法显示

 deResponse(info) {
        if(!info){this.$message.warning('数据为空');return}
           let mess =  JSON.stringify(info,null, 2);
           this.$alert('<pre style="white-space: pre">'+mess+'</pre>', '查询条件数据', {
           dangerouslyUseHTMLString: true
       });
 },
不停学习,热爱是源源不断的动力。
原文地址:https://www.cnblogs.com/ximenchuifa/p/15242476.html