Ant Design of Vue (3)Card 卡片动态加载后台数据
一.首先来建一个vue静态页面卡片 Card - Ant Design Vue (antdv.com)来看看页面效果二.接下修改Card 动态加载显示后台数据1.这个是后台接口返回数据2.接口有了,那接下来进行页面改造。3.接口改造完成,接下来调用接口,加载数据。获取后台数据的方式很多种,可以用自己拿手的方式进行数据获取,这里只是提供实现的思路,可能不是最挂的方式,各位可以积极指出。4.数据加载出
·
一.首先来建一个vue静态页面
卡片 Card - Ant Design Vue (antdv.com)
来看看页面效果
二.接下修改Card 动态加载显示后台数据
1.这个是后台接口返回数据
2.接口有了,那接下来进行页面改造。
3.接口改造完成,接下来调用接口,加载数据。
获取后台数据的方式很多种,可以用自己拿手的方式进行数据获取,这里只是提供实现的思路,可能不是最挂的方式,各位可以积极指出。
4.数据加载出来了,让它自动刷新显示实时数据
参考文章:vue项目中实现定时刷新页面(重新渲染数据实时更新) - 飞翔的蜗牛~ - 博客园 (cnblogs.com)
5.实现页面代码
<script>
import { infoAllBufferApi } from '@/api/main'
export default {
data(){
return {
content:null,//卡片内容
timer:null, //定时器名称
}
},
mounted(){
this.materielinfoAllBuffer();
this.timer = setInterval(() => {
setTimeout(this.materielinfoAllBuffer, 0)
}, 8000)
},
methods:{
materielinfoAllBuffer(){
infoAllBufferApi('materielInfoAllBuffer').then(res => {
if (res.code == 0) {
console.log("原始数据2"+res.data);
var jsonobj= eval('(' +res.data + ')');//解析Json字符串
if(jsonobj.data!=null){
this.$set(this.$data,'content',jsonobj.data); //展示数据在卡片
}else{
this.content="接口出错了";
}
}
}).catch(err => {
console.log('err:', err)
})
}
},
beforeDestroy(){
clearInterval(this.timer);
this.timer = null;
}
}
</script>
6.页面效果
三.数据展示出来了,但是状态那一列,我要根据根据对应的数字,显示中文名称,并且显示不同的颜色
参考文章:(32条消息) vue根据不同文字显示不同颜色_茶理li-CSDN博客
1.页面修改:
2.完整的页面代码
<script>
import { infoAllBufferApi } from '@/api/main'
export default {
data(){
return {
content:null,//卡片内容
timer:null, //定时器名称
}
},
//根据状态更改颜色
computed: {
activation() {
return (icontent) => { // 使用JavaScript闭包,进行传值操作
if (icontent ==4){
return {'color':'red'}
}
else if (icontent ==7){
return {'color':'blue'}
}
else if (icontent ==5){
return {'color':'DeepPink'}
}
else if(icontent==2){
return {'color':'Lime'}
}
else if(icontent==0){
return {'color':'LightSeaGreen'}
}
}
}
},
mounted(){
this.materielinfoAllBuffer();
this.timer = setInterval(() => {
setTimeout(this.materielinfoAllBuffer, 0)
}, 8000)
},
methods:{
materielinfoAllBuffer(){
infoAllBufferApi('materielInfoAllBuffer').then(res => {
if (res.code == 0) {
console.log("原始数据2"+res.data);
var jsonobj= eval('(' +res.data + ')');//解析Json字符串
if(jsonobj.data!=null){
this.$set(this.$data,'content',jsonobj.data); //展示数据在卡片
}else{
this.content="接口出错了";
}
}
}).catch(err => {
console.log('err:', err)
})
}
},
beforeDestroy(){
clearInterval(this.timer);
this.timer = null;
}
}
</script>
3.页面效果
四.颜色对照表
更多推荐
已为社区贡献27条内容
所有评论(0)