当vue 页面加载数据时显示 加载loading

参考：https://www.jianshu.com/p/104bbb01b222

Vue 页面加载数据之前增加 `loading` 动画

创建组件

1、新建 .vue 文件： src -> components -> laoding -> index.vue

2、编辑 index.vue 文件

<template>
    <div class="loading"></div>
</template>

<script>
    export default {
        name: "loading"
    }
</script>

<style scoped>
    .loading {
        position: fixed;
        left: 20%;
        top: 20%;
        background: url('../../assets/images/load2.gif') center center no-repeat ;
        width: 50vw;
        height: 50vh;
        z-index: 1000;
    }

</style>

使用组件

通过自定义一个变量 isLoading 初始化为 true ，在数据请求成功之后将变量改为 false ，在 template 中通过变量来控制是否显示隐藏，使用 vue 自带的 过渡效果 增加用户体验

需要在全局的 css 中加入过渡需要的样式 globle.css

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.vue 文件使用代码示例片段

                <el-table-column prop="salechnl" label="销售渠道" width="200" align="center"></el-table-column>
                <el-table-column prop="riskname" label="险种名称" width="200" align="center"></el-table-column>
            </el-table>
            <!-- 分页 -->
<!--                        <div align="right" style="margin-top: 20px;margin-right:245px">-->
<!--                            <el-pagination-->
<!--                                    background-->
<!--                                    @size-change="handleSizeChange"-->
<!--                                    @current-change="handleCurrentChange"-->
<!--                                    :current-page.sync="currentPage"-->
<!--                                    :page-sizes="pageCount"-->
<!--                                    :page-size="5"-->
<!--                                    layout="sizes, prev, pager, next, jumper,total"-->
<!--                                    :total="count"-->
<!--                            ></el-pagination>-->
<!--                        </div>-->
            <transition name="fade">
                <loading v-if="isLoading"></loading>
            </transition>
        
        </div>

    </div>
</template>

<script>
    import http from '../../../assets/js/http'
    import Loading from '../../../components/loading/index'
    export default {
        components:{ Loading  },
        data() {
            return {

                isLoading: false,
                dData: [],
        methods: {
            loadData(){
                this.isLoading = true;
                var data = {};
                //参数
                let userInfo = Lockr.get('userInfo')
if (this.formInline.contract_start_date != '' ) {
                    data.contract_start_date = this.formatter(this.formInline.contract_start_date, "yyyy-MM-dd")
                } else {
                    data.contract_start_date = "";
                };
                if (this.formInline.contract_end_date != '' ) {
                    data.contract_end_date = this.formatter(this.formInline.contract_end_date, "yyyy-MM-dd")
                } else {
                    data.contract_end_date = this.formInline.contract_end_date
                };
                console.log("%c -------传递额参数-----","color:green");
                console.log(data);
                this.apiPost('underwritelist/queryunderwritelist', data).then((res) => {
                    console.log(res);
                    this.tableData=[];
                    this.handelResponse(res, (data) => {
                        console.log(res);
                        this.tableData = data.list;
                        this.count = data.total;
                        this.isLoading = false;
                    })
                });
            },