等待加载
... 2023-7-10 Less than 1 minute
# 等待加载
# 普通用法
table-loading属性可以配置等待加载状态
<el-button type="primary"
icon="el-icon-sort"
@click="getOption">加载等待框</el-button>
<br /> <br />
<avue-crud :key="reload"
:data="data"
:option="option"
:table-loading="loading"></avue-crud>
<script>
export default {
data () {
return {
reload: Math.random(),
loading: true,
data: [],
option: {
border: true,
align: 'center',
menuAlign: 'center',
loadingText: "Loading...",
loadingSpinner: "svg",
loadingSvgViewBox: "-10, -10, 50, 50",
loadingBackground: "rgba(122, 122, 122, 0.8)",
column: [
{
label: '姓名',
prop: 'name'
}, {
label: '性别',
prop: 'sex'
}]
},
};
},
created () {
this.getOption()
},
methods: {
getOption () {
this.loading = true;
this.$message.success('模拟2s后服务端动态加载');
setTimeout(() => {
this.data = [
{
name: '张三',
sex: '男',
province: '110000'
}, {
name: '李四',
sex: '女',
province: '120000'
}
]
this.loading = false;
this.reload = Math.random()
}, 2000)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
Expand Copy Copy
:::
1
2
2