Vue---Element+Vue实现页面loading效果

你的名字 2023-07-21 11:14 79阅读 0赞

**需求**

**      初始化页面时实现loading效果，等axios调接口获取数据并把数据渲染完页面后，去除loading效果。**

<html>
    
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon" href="favicon.ico">
        
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    
        <style>
    
        </style>
    </head>
    
    <body>
        <div id="app">
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180"></el-table-column>
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
        </div>
    </body>
    
    </html>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                tableData: [{           //初始空值
                    date: '',
                    name: '',
                    address: ''
                }],
                loading: true           //加载loading
            },
    
            //页面初始化：axios 请求数据
            mounted() {
                var that = this;    
                axios
                    .get("https://autumnfish.cn/api/joke/list?num=1")
                    .then(
                        function (response) {           
                            that.tableData = [{             //赋值
                                date: '2020-04-03',
                                name: 'Lonely',
                                address: '上海浦东新区张江高科1387号'
                            },
                            {
                                date: '2020-04-03',
                                name: 'Soul',
                                address: '上海长宁区天山5村6单元203'
                            }];
                            that.loading = false;           //去除loading
                        },
                        function (err) {
                            console.log(err);
                        }
                    );
            }
        });
    
    </script>