阳泉住房和城乡建设部网站,东莞网页设计与建设,制作销售网站,2015做哪些网站致富一: 通过highlight.js项目实现对json字符串的染色高亮 此项目是jsp文件,并且引用了element-ui/highlight.js的组件 二: 实现效果 三: 代码实现
关键点在于成功引入相关的js及css#xff0c;并且在tooltip渲染时进行数据染色。再将染色后的数据放到v-html中进行页面渲染(关键方…一: 通过highlight.js项目实现对json字符串的染色高亮 此项目是jsp文件,并且引用了element-ui/highlight.js的组件 二: 实现效果 三: 代码实现
关键点在于成功引入相关的js及css并且在tooltip渲染时进行数据染色。再将染色后的数据放到v-html中进行页面渲染(关键方法: highlightedData)
% page languagejava contentTypetext/html; charsetUTF-8 pageEncodingUTF-8 %
% include file/WEB-INF/pages/main/taglibs.jsp %
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8/title主子服务查询/titlescript src${pageContext.request.contextPath}/js/vueEle/2.7/vue.js/scriptscript src${pageContext.request.contextPath}/js/vueEle/js/lib/vue-resource.js/scriptscript src${pageContext.request.contextPath}/js/vueEle/2.7/vueEle.js/scriptscript src${pageContext.request.contextPath}/js/highlight/es/highlight.min.js/scriptlink relstylesheet href${pageContext.request.contextPath}/js/vueEle/2.7/vueEle.csslink href${pageContext.request.contextPath}/js/highlight/styles/atom-one-dark-reasonable.css relstylesheet typetext/cssstyle%-- 解决文本过长显示不全的问题 --%.el-tooltip__popper {border-left: 20px solid #000000; /* 设置左侧边框为10px宽颜色为黑色 */border-right: 10px solid #000000; /* 设置左侧边框为10px宽颜色为黑色 */max-height: 400px;overflow-y: auto;}/style
/head
body
div idapp stylewidth: 100%templateel-containerel-headerel-form refform :modelsearchForm label-width150pxstylemargin: 10px 10px 10px 10px;float: left:inlinetrueel-rowel-colel-form-item label工单号el-input v-modelsearchForm.applicationNo/el-input/el-form-itemel-form-item label商编号el-input v-modelsearchForm.merchantNo/el-input/el-form-itemel-form-itemel-button typeprimary clicksearch查询/el-button/el-form-item/el-col/el-row/el-form/el-headerel-mainel-tablev-loadingloading:datatableDatastylewidth: 100%;margin-bottom: 20px;row-keyindexborderempty-text无数据propertysid show-overflow-tooltiptrue label min-width1%-- default-expand-all--%:tree-props{children: subFlowServiceRecords, hasChildren: hasChildren}el-table-columnpropindexlabel序号width100/el-table-columnel-table-columnpropapplicationNolabel工单号/el-table-columnel-table-columnpropmerchantNolabel商编号/el-table-columnel-table-columnpropserviceNamelabel步骤/el-table-columnel-table-columnpropstatuslabel状态width80/el-table-columnel-table-column label请求信息template slot-scopescope v-ifscope.row.mainServiceDatael-tooltip div slotcontent styleborder-left-width: 100px v-htmlhighlightedData(scope.row.mainServiceData)/divel-button clickcopyData(scope.row.mainServiceData)复制/el-button/el-tooltip/template/el-table-columnel-table-columnpropstartTimelabel开始时间width180/el-table-columnel-table-columnpropendTimelabel结束时间width180/el-table-column/el-tablediv classblockel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:page-sizepageData.pageSize:page-sizes[10, 20, 30, 40]layouttotal, sizes, prev, pager, next:totalpageData.total/el-pagination/div/el-main/el-container/template/div
scriptnew Vue({el: #app,data() {return {loading: false,tableData: [],pageData: {currentPage: 1,pageSize: 10,total: 0,},searchForm: {applicationNo: null,merchantNo: null}}},methods: {copyData(data) {const textarea document.createElement(textarea);textarea.value JSON.stringify(JSON.parse(data), null, 2);document.body.appendChild(textarea);textarea.select();document.execCommand(copy);document.body.removeChild(textarea);this.$message({message: 复制成功!,type: success});},highlightedData(code) {const language json; // 指定要高亮的语言例如 JSONlet code2 JSON.stringify(JSON.parse(code), null, 2);return hljs.highlight(language, code2).value;},handleSizeChange(val) {this.pageData.pageSize val;this.search()},handleCurrentChange(val) {this.pageData.currentPage val;this.search()},search() {let applicationNo this.searchForm.applicationNo;let merchantNo this.searchForm.merchantNo;if ((applicationNo applicationNo ! )|| (merchantNo merchantNo ! )) {this.loading true;this.$http.post(../flowService/queryRecordByApplicationNo,{applicationNo: applicationNo,merchantNo: merchantNo,currentPage: this.pageData.currentPage,pageSize: this.pageData.pageSize}).then(res {if (res.body.status success) {this.tableData res.body.object.flowServiceRecordsthis.pageData.total res.body.object.total;this.setSerialNumbers(this.tableData);} else {alert(res.body.errorMessage);}this.loading false;})} else {this.loading false;this.$message({message: 请至少输入一个参数!,type: warning});}},setSerialNumbers(data, parentSerial ) {let serial 1;for (const item of data) {item.index parentSerial serial;serial;if (item.subFlowServiceRecords item.subFlowServiceRecords.length 0) {this.setSerialNumbers(item.subFlowServiceRecords, item.index .);}}}}})
/script/body/html
