table-empty.vue
1.66 KB
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
63
64
65
66
<template>
<div class="v-table-empty">
<!--表格无数据的提示信息-->
<div class="v-table-empty-content"
:style="{'height':contentHeight+'px','width':width+'px','top':titleHeight+'px'}">
<div class="v-table-empty-inner"
:style="{'height':contentHeight+'px','width':'100%','line-height':contentHeight+'px'}"
v-html="getCurrentContent"></div>
</div>
<!--表格无数据的滚动条-->
<div class="v-table-empty-scroll"
:style="{'height':contentHeight+'px','width':width+'px','top':titleHeight+'px'}">
<div class="v-table-empty-inner" :style="{'height':'1px','width':totalColumnsWidth+'px'}"></div>
</div>
</div>
</template>
<script>
import utils from '../../src/utils/utils.js'
export default{
props: {
// 表头的宽度
titleHeight: [Number, String],
// 内容显示的高度
contentHeight: [Number, String],
// 显示的宽度
width: [Number, String],
// 所有列的宽度和
totalColumnsWidth: [Number, String],
// 没数据时显示的内容
errorContent: {
type: [String]
},
// 是否正在加载
isLoading: [Boolean]
},
computed: {
// 获取当前要显示的内容
getCurrentContent(){
var result = '';
if (!this.isLoading) {
result = this.errorContent;
}
return result;
}
}
}
</script>