前端菜鸡流水账日记 -- 遮罩层loading的使用

再来分享一个简单的知识，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遮罩层的分享啦

感觉还不错的话给个鼓励和支持哦，也欢迎大家找我探讨问题，只要不嫌弃我是个新手，哈哈哈~

我们下篇文章再见哦