再来分享一个简单的知识,loading,想必大家都不陌生,不管是什么页面中肯定都有所涉及,一般都是为了美化页面加载的效果,给用户较好的体验感,对于这个的使用就一句话,谁要有加载效果就把loading放谁身上,table用那就绑定到table表格上
对vue3:(这是给table接口调用数据时,网络慢的话新增一个loading的效果)
<Table
:loading="initLoading"
:columns="columns"
:data="data"
:scroll="{ y: tableHeight }"
>
直接再table中使用:loading = 'initloading' --initloading是自己定义的,可以换其他的名字
然后再定义initloading这个变量,给他一个初始值
const initLoading = ref(false);
在之后就是再调用接口的地方进行,initloading的打开和关闭了,即调用接口的时候打开,接口调用完成.then之后关闭,实现一个loading的效果
// 获取表格数据
const getDataFMList = (current, pageSize, params) => {
initLoading.value = true;
getDataFM(params ? params : {}, {
current: current != undefined ? current : 1,
pageSize: pageSize != undefined ? pageSize : 20,
}).then((res) => {
// let DataFMList = res.data.result
// // 数据总条数
// pagination.totalCount = res.data.paging.total
// for (var i in DataFMList) {
// data.push(DataFMList[i])
// }
// 数据总条数
pagination.totalCount = res.data.data.total;
data.length = 0;
res.data.data.info.forEach((item) => {
data.push(item);
});
console.log("补水阀门数据", data);
initLoading.value = false;
});
};
一个完成的对table列表的新增的遮罩层loading的功能就完成啦~~~
vue2的写法和这个是差不多的,也是谁用就写道谁身上,语法上有所不同
v-loading = 'initLoading' --- 绑定的loading的写法
initLoading: false --- 在data中定义变量
this.initLoading = true/false -- 在接口的位置
语法上有一定的不同,但是意思都是一个意思,好啦,这就是我关于loading遮罩层的分享啦
感觉还不错的话给个鼓励和支持哦,也欢迎大家找我探讨问题,只要不嫌弃我是个新手,哈哈哈~
我们下篇文章再见哦