loading 加载
他有几个参数
作用:加载数据时显示动效。
参数 | 说明 |
---|---|
target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 |
lock | 同 v-loading 指令中的 lock 修饰符 |
text | 显示在加载图标下方的加载文案 |
spinner | 自定义加载图标类名 |
background | 遮罩背景色 |
customClass | Loading 的自定义类名 |
body | 同 v-loading 指令中的 body 修饰符 |
例子:
this.$nextTick(()=>{
loading=this.$loading({
target:'.filter-menus-box',
lock:true,
text:'loading',
spinner:'el-icon-loading',
background:'rgba(0,0,0,0.7)'
})
})
区域加载
在表格等容器中加载数据时显示。
Element 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。
<template>
2 <el-table
3 v-loading="loading"
4 :data="tableData"
5 style="width: 100%">
6 <el-table-column
7 prop="date"
8 label="日期"
9 width="100">
10 </el-table-column