element-ui 实现加载效果

最新推荐文章于 2024-07-16 15:25:57 发布

liudachu

最新推荐文章于 2024-07-16 15:25:57 发布

阅读量1.8k

点赞数 2

分类专栏：前端-实战开发手册文章标签： element-ui

本文链接：https://blog.csdn.net/liudachu/article/details/108996781

版权

前端-实战开发手册专栏收录该内容

11 篇文章 1 订阅

订阅专栏

效果展示
在这里插入图片描述

路由钩子或者api请求的时候加一下

<template>

    <el-table
            v-loading="loading"
            :data="emps"
            stripe
            style="width: 100%">
        <el-table-column
                prop="eid"
                label="员工编号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="ephone"
                label="电话"
                width="160">
        </el-table-column>
        <el-table-column
                prop="address"
                label="常驻地址">
        </el-table-column>
        <el-table-column
                prop="date"
                label="入职日期">
        </el-table-column>
        <el-table-column
                prop="sal"
                label="薪资">
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "Emp",
        data() {
            return {
                emps: [],
                loading:true,
            }
        },
        methods:{
            openFullScreen() {
                this.fullscreenLoading = true;
                setTimeout(() => {
                    this.loading = false;
                }, 500);
            },
        },
        computed:{

        },
        created(){
            let _this=this;
            _this.loading=true;
            this.axios.get("/emp/queryAll")
                .then(res=>{
                    let emps=[];
                    for (let i = 0; i < res.data.length; i++) {
                        emps[i]={
                            eid: res.data[i].eid,
                            ephone: res.data[i].ephone,
                            date: res.data[i].hiredate,
                            name: res.data[i].ename,
                            address: res.data[i].eaddress,
                            sal: res.data[i].sal
                        };
                    }
                    this.emps=emps;
                    _this.loading=false;
                })

        }
    }
</script>

<style scoped>

</style>