Loading 加载

加载数据时显示动效。

区域加载

在表格等容器中加载数据时显示。

Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上。

 1 <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="180">
10     </el-table-column>
11     <el-table-column
12       prop="name"
13       label="姓名"
14       width="180">
15     </el-table-column>
16     <el-table-column
17       prop="address"
18       label="地址">
19     </el-table-column>
20   </el-table>
21 </template>
22 
23 <style>
24   body {
25     margin: 0;
26   }
27 </style>
28 
29 <script>
30   export default {
31     data() {
32       return {
33         tableData: [{
34           date: '2016-05-03',
35           name: '王小虎',
36           address: '上海市普陀区金沙江路 1518 弄'
37         }, {
38           date: '2016-05-02',
39           name: '王小虎',
40           address: '上海市普陀区金沙江路 1518 弄'
41         }, {
42           date: '2016-05-04',
43           name: '王小虎',
44           address: '上海市普陀区金沙江路 1518 弄'
45         }],
46         loading: true
47       };
48     }
49   };
50 </script>

View Code