get与post拼接url地址不同:
javascript
let postData = {
method: "post",
data: {
op: "/api/setting/maintenanceperiod?period="+this.authorizationCode,
loadingConfig: {},
data: {
period:this.authorizationCode
}
}
};
javascript
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赋值,并绑定样式。
javascript
<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>
javascript
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循环:
javascript
<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>