element-ui中的loading的实际应用

实际开发中，要如何指定loading在我们想要的区域加遮罩呢？

前提：

你已经引入element-ui，如下：

import ElementUI from 'element-ui'

import { Loading } from 'element-ui'

1、在vue的原型链上定义一个打开loading的方法：

2、在开始请求接口是调用改方法，因为我们是直接定义在VUE原型链上的方法，所以我们可以直接this调用

3、请求成功后执行关闭 *** 作：

在使用element-plus-table组件时，可以通过设置属性来修改loading动画。

设置loading-icon属性：

你可以设置loading-icon属性为你自己的加载图标，如：

Copy code

<el-table :data="tableData" :loading="loading" loading-icon="el-icon-loading"></el-table>

设置loading-text属性：

你可以设置loading-text属性为你自己的加载文字，如：

Copy code

<el-table :data="tableData" :loading="loading" loading-text="正在加载"></el-table>

自定义loading动画

如果要自定义loading动画，你可以使用 scoped slot 属性来替换默认的loading动画

Copy code

<el-table :data="tableData" :loading="loading" v-slot="{ loading }">

<div v-if="loading" class="loading">

<img src="path/to/your/loading-img.svg" alt="Loading">

</div>

<el-table-column ...>

</el-table>

这样你就可以自定义你的loading动画了。

请注意，这些修改仅适用于element-plus-table组件。

首先先学习一下指令的相关知识点

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

我们会在 稍后 讨论 渲染函数 时介绍更多 VNodes 的细节。

接下来我们来看一下钩子函数的参数 (即 el 、 binding 、 vnode 和 oldVnode )。

在工作中主要做pc端的后台系统，使用的ui库为elementui，相信使用vue的小伙伴对其并不陌生，下面我就对其中的v-loding的源码进行剖析

loading.vue

directive.js

---