项目需求为:进入页面,初始加载数据(初始数据为空)时不展示缺省页,等调用接口,获取不到数据以后再展示缺省页图片。
<Table
border
:columns="column"
:data="data"
:no-data-text=" data.length == 0 && tableNoData ? `<img src=${noDataImg} style='width:288px;' /><p style='color:#999999;margin-bottom:16px;'>暂无数据</p>` : '' "
max-height="231"
>
</Table>
思路:根据官网的api,在原有表格的基础上添加一个:no-data-text属性(数据为空时显示的提示内容),用三元表达式控制有无数据时的展示内容。
tableNoData为自定义的一个变量,值为布尔类型,只有通过调用接口获取数据,才能改变它的值。
data{
return{
tableNoData: false, //班级表格是否展示缺省页
}
}
methods:{
getData(){
apiFunc({param:value}).then(res=>{
if ( res.data.get_list.length == 0 ) { //没数据
this.tableNoData = true;
} else {
this.tableNoData = false;
<!--表格数据赋值代码段省略-->
}
})
}
}