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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
| <template>
| <view class="tn-table-class tn-table" :class="[tableClass]" :style="[tableStyle]">
| <slot></slot>
| </view>
| </template>
|
| <script>
| export default {
| name: 'tn-table',
| props: {
| // 边框宽度
| borderWidth: {
| type: [String, Number],
| default: ''
| },
| // 边框颜色
| borderColor: {
| type: String,
| default: ''
| },
| // 显示上边框
| borderTop: {
| type: Boolean,
| default: true
| },
| // 显示右边框
| borderRight: {
| type: Boolean,
| default: false
| },
| // 显示下边框
| borderBottom: {
| type: Boolean,
| default: false
| },
| // 显示左边框
| borderLeft: {
| type: Boolean,
| default: true
| }
| },
| computed: {
| parentData() {
| return [this.borderWidth, this.borderColor]
| },
| tableClass() {
| let clazz = ''
| return clazz
| },
| tableStyle() {
| let style = {}
| if (this.borderWidth !== '') {
| style.borderWidth = this.$t.string.getLengthUnitValue(this.borderWidth)
| }
| if (this.borderColor) {
| style.borderColor = this.borderColor
| }
| if (this.borderLeft) {
| style.borderLeftStyle = 'solid'
| }
| if (this.borderRight) {
| style.borderRightStyle = 'solid'
| }
| if (this.borderTop) {
| style.borderTopStyle = 'solid'
| }
| if (this.borderBottom) {
| style.borderBottomStyle = 'solid'
| }
| return style
| }
| },
| data() {
| return {}
| },
| created() {
| this.children = []
| },
| watch: {
| parentData() {
| // 更新子组件的数据
| if (this.children.length) {
| this.children.map((child) => {
| typeof(child.updateParentData) === 'function' && child.updateParentData()
| })
| }
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| .tn-table {
| box-sizing: border-box;
|
| border-width: 1rpx;
| border-style: none;
| border-color: #AAAAAA;
| }
| </style>
|
|
