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

相关文章推荐

星星上的斑马 · -yingdan小镇公交车尺寸_哔哩哔哩_b ...· 8 月前 ·

侠义非凡的硬盘 · 全境封锁2快速升级攻略 ...· 8 月前 ·

痴情的豆腐 · “5A级”企业：实现产能品质双提升 ...· 9 月前 ·

从容的青蛙 · 电影重启之深渊疑冢在哪里看 - 抖音· 1 年前 ·

儒雅的生菜 · 风云雄霸天�%B - 搜狗图片搜索· 1 年前 ·

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>
</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;