get與post拼接url地址不同:
let postData = {method: "post",data: {op: "/api/setting/maintenanceperiod?period="+this.authorizationCode,loadingConfig: {},data: {period:this.authorizationCode}}};
if(this.editData.id){let postData = {method: "get",data: {op: "/api/" + this.editData.id + "/rmmc",loadingConfig: {},data: {id: this.editData.id,pwd: this.editData.password,},},};
后端返回一個:
某某市領導職數共20個,實配2,缺編<span style='color:#D1881B'>18</span>個,
進行頁面渲染,有3種方式,第一種最笨的方式,自己手動敲出來,但是不夠靈活,一旦后端的數據要變,可采用第二種,分割開來賦值。第三種相對靈活,直接循環分割的字符串,進行v-html賦值,并綁定樣式。
<div class="actual" v-if="returnZsbzText"><img src="../../../../static/images/head-renyuan.png" alt=""><!-- <span>一二級主任科員職數999個,</span><span>實有999個,</span><span>空缺999個</span> --><!-- <span v-html="returnZsbzText.split(',')[0]"></span><span v-html="returnZsbzText.split(',')[1]"></span><span v-html="returnZsbzText.split(',')[2]" :style="{ color: '#D1881B' }"></span><span v-html="returnZsbzText.split(',')[3]" :style="{ color: '#4177c7' }"></span> --><template v-for="sentence in returnZsbzText.split(',')"><span v-html="sentence" :style="getStyle(sentence)" :key=""></span></template></div>
getStyle(sentence) {if (sentence.includes("style")) {// 提取style樣式const styleStartIndex = sentence.indexOf('style="') + 7;const styleEndIndex = sentence.indexOf('"', styleStartIndex);const style = sentence.slice(styleStartIndex, styleEndIndex);// 解析樣式字符串,提取color屬性的值const colorStartIndex = style.indexOf("color:") + 6;const colorEndIndex = style.indexOf(";", colorStartIndex);const color = style.slice(colorStartIndex, colorEndIndex).trim();return { color: color };} else {return {}; // 默認樣式}},
此時,若后端返回的是一個數組,數組里面是兩條類似于以上的數據
[ "一二級主任科員職數0個,實有0個,;", "三四級主任科員職數0個,實有0個,;" ]
此時采用相同的方式,再加一個for循環:
<div class="actualVacancy" v-if="returnRybzText"><div class="actual" v-for="(item,index) in returnRybzText" :key="index"><img src="../../../../static/images/head-renyuan.png" alt=""><template v-for="sentence in item.split(',')"><span v-html="sentence" :style="getStyle(sentence)" :key=""></span></template></div></div>