uview-plus 3.4.80 → 3.4.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/changelog.md +8 -0
- package/components/u-table2/tableRow.vue +244 -0
- package/components/u-table2/u-table2.vue +194 -132
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
<style lang="scss" scoped>
|
|
2
|
+
.u-table-row {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: row;
|
|
5
|
+
align-items: center;
|
|
6
|
+
border-bottom: 1px solid #ebeef5;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// 添加border样式支持
|
|
12
|
+
.u-table-border {
|
|
13
|
+
border-top: 1px solid #ebeef5;
|
|
14
|
+
border-left: 1px solid #ebeef5;
|
|
15
|
+
border-right: 1px solid #ebeef5;
|
|
16
|
+
.u-table-cell {
|
|
17
|
+
border-right: 1px solid #ebeef5;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.u-table-cell:last-child {
|
|
21
|
+
border-right: none;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.u-table-cell {
|
|
26
|
+
flex: 1;
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: row;
|
|
29
|
+
padding: 10px 10px;
|
|
30
|
+
font-size: 14px;
|
|
31
|
+
white-space: nowrap;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
text-overflow: ellipsis;
|
|
34
|
+
line-height: 1.1;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.u-table-row-zebra {
|
|
38
|
+
background-color: #fafafa;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.u-table-row-highlight {
|
|
42
|
+
background-color: #f5f7fa;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.u-table-empty {
|
|
46
|
+
text-align: center;
|
|
47
|
+
padding: 20px;
|
|
48
|
+
color: #999;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.u-text-left {
|
|
52
|
+
text-align: left;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.u-text-center {
|
|
56
|
+
text-align: center;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.u-text-right {
|
|
60
|
+
text-align: right;
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
63
|
+
<template>
|
|
64
|
+
<view class="u-table-row u-table-row-child"
|
|
65
|
+
:class="[highlightCurrentRow && currentRow === row ? 'u-table-row-highlight' : '',
|
|
66
|
+
rowClassName ? rowClassName(row, rowIndex) : '',
|
|
67
|
+
stripe && rowIndex % 2 === 1 ? 'u-table-row-zebra' : ''
|
|
68
|
+
]" :style="{height: rowHeight}" @click="handleRowClick(row)">
|
|
69
|
+
<view v-for="(col, colIndex) in columns" :key="col.key"
|
|
70
|
+
class="u-table-cell"
|
|
71
|
+
:class="[col.align ? 'u-text-' + col.align : '',
|
|
72
|
+
cellClassName ? cellClassName(row, col) : '',
|
|
73
|
+
getFixedClass(col)
|
|
74
|
+
]"
|
|
75
|
+
:style="cellStyleInner({row: row, column: col, rowIndex: rowIndex, columnIndex: colIndex, level: level})">
|
|
76
|
+
<!-- 复选框列 -->
|
|
77
|
+
<view v-if="col.type === 'selection'">
|
|
78
|
+
<checkbox :checked="isSelected(row)"
|
|
79
|
+
@click.stop="$emit('toggleSelect', row)" />
|
|
80
|
+
</view>
|
|
81
|
+
<template v-else>
|
|
82
|
+
<!-- 在mainCol列显示展开图标 -->
|
|
83
|
+
<view v-if="col.key === computedMainCol && hasTree"
|
|
84
|
+
@click.stop="toggleExpand(row)" :style="{width: expandWidth}">
|
|
85
|
+
<view v-if="row.children && row.children.length > 0">
|
|
86
|
+
{{ isExpanded(row) ? '▼' : '▶' }}
|
|
87
|
+
</view>
|
|
88
|
+
</view>
|
|
89
|
+
<slot name="cellChild" :row="row" :column="col" :prow="parentRow"
|
|
90
|
+
:rowIndex="rowIndex" :columnIndex="colIndex" :level="level">
|
|
91
|
+
<view class="u-table-cell_content">
|
|
92
|
+
{{ row[col.key] }}
|
|
93
|
+
</view>
|
|
94
|
+
</slot>
|
|
95
|
+
</template>
|
|
96
|
+
</view>
|
|
97
|
+
</view>
|
|
98
|
+
<!-- 递归渲染更深层的子级 -->
|
|
99
|
+
<template v-if="isExpanded(row) && row[treeProps.children] && row[treeProps.children].length">
|
|
100
|
+
<template v-for="(rowChild, childIndex) in row[treeProps.children]" :key="rowChild[rowKey] || childIndex">
|
|
101
|
+
<table-row
|
|
102
|
+
:row="rowChild"
|
|
103
|
+
:rowIndex="childIndex"
|
|
104
|
+
:parent-row="row"
|
|
105
|
+
:columns="columns"
|
|
106
|
+
:tree-props="treeProps"
|
|
107
|
+
:row-key="rowKey"
|
|
108
|
+
:expanded-keys="expandedKeys"
|
|
109
|
+
:cell-style-inner="cellStyleInner"
|
|
110
|
+
:is-expanded="isExpanded"
|
|
111
|
+
:row-class-name="rowClassName"
|
|
112
|
+
:stripe="stripe"
|
|
113
|
+
:cell-class-name="cellClassName"
|
|
114
|
+
:get-fixed-class="getFixedClass"
|
|
115
|
+
:highlight-current-row="highlightCurrentRow"
|
|
116
|
+
:current-row="currentRow"
|
|
117
|
+
:handle-row-click="handleRowClick"
|
|
118
|
+
:toggle-expand="toggleExpand"
|
|
119
|
+
:level="level + 1"
|
|
120
|
+
:rowHeight="rowHeight"
|
|
121
|
+
:hasTree="hasTree"
|
|
122
|
+
:selectedRows="selectedRows"
|
|
123
|
+
:expandWidth="expandWidth"
|
|
124
|
+
:computed-main-col="computedMainCol"
|
|
125
|
+
@toggle-select="$emit('toggleSelect', $event)"
|
|
126
|
+
@row-click="$emit('rowClick', $event)"
|
|
127
|
+
@toggle-expand="$emit('toggleExpand', $event)"
|
|
128
|
+
>
|
|
129
|
+
<template v-slot:cellChild="scope">
|
|
130
|
+
<slot name="cellChild" :row="scope.row" :column="scope.column" :prow="scope.prow"
|
|
131
|
+
:rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="level">
|
|
132
|
+
</slot>
|
|
133
|
+
</template>
|
|
134
|
+
</table-row>
|
|
135
|
+
</template>
|
|
136
|
+
</template>
|
|
137
|
+
</template>
|
|
138
|
+
|
|
139
|
+
<script>
|
|
140
|
+
export default {
|
|
141
|
+
name: 'tableRow',
|
|
142
|
+
props: {
|
|
143
|
+
row: {
|
|
144
|
+
type: Object,
|
|
145
|
+
required: true
|
|
146
|
+
},
|
|
147
|
+
rowIndex: {
|
|
148
|
+
type: Number,
|
|
149
|
+
required: true
|
|
150
|
+
},
|
|
151
|
+
parentRow: {
|
|
152
|
+
type: Object,
|
|
153
|
+
default: null
|
|
154
|
+
},
|
|
155
|
+
columns: {
|
|
156
|
+
type: Array,
|
|
157
|
+
required: true
|
|
158
|
+
},
|
|
159
|
+
treeProps: {
|
|
160
|
+
type: Object,
|
|
161
|
+
required: true
|
|
162
|
+
},
|
|
163
|
+
rowKey: {
|
|
164
|
+
type: String,
|
|
165
|
+
required: true
|
|
166
|
+
},
|
|
167
|
+
expandedKeys: {
|
|
168
|
+
type: Array,
|
|
169
|
+
required: true
|
|
170
|
+
},
|
|
171
|
+
cellStyleInner: {
|
|
172
|
+
type: Function,
|
|
173
|
+
required: true
|
|
174
|
+
},
|
|
175
|
+
isExpanded: {
|
|
176
|
+
type: Function,
|
|
177
|
+
required: true
|
|
178
|
+
},
|
|
179
|
+
rowClassName: {
|
|
180
|
+
type: Function,
|
|
181
|
+
default: null
|
|
182
|
+
},
|
|
183
|
+
stripe: {
|
|
184
|
+
type: Boolean,
|
|
185
|
+
default: false
|
|
186
|
+
},
|
|
187
|
+
cellClassName: {
|
|
188
|
+
type: Function,
|
|
189
|
+
default: null
|
|
190
|
+
},
|
|
191
|
+
getFixedClass: {
|
|
192
|
+
type: Function,
|
|
193
|
+
required: true
|
|
194
|
+
},
|
|
195
|
+
highlightCurrentRow: {
|
|
196
|
+
type: Boolean,
|
|
197
|
+
default: false
|
|
198
|
+
},
|
|
199
|
+
currentRow: {
|
|
200
|
+
type: Object,
|
|
201
|
+
default: null
|
|
202
|
+
},
|
|
203
|
+
handleRowClick: {
|
|
204
|
+
type: Function,
|
|
205
|
+
required: true
|
|
206
|
+
},
|
|
207
|
+
toggleExpand: {
|
|
208
|
+
type: Function,
|
|
209
|
+
required: true
|
|
210
|
+
},
|
|
211
|
+
level: {
|
|
212
|
+
type: Number,
|
|
213
|
+
required: true
|
|
214
|
+
},
|
|
215
|
+
// 添加computedMainCol属性
|
|
216
|
+
computedMainCol: {
|
|
217
|
+
type: String,
|
|
218
|
+
required: true
|
|
219
|
+
},
|
|
220
|
+
expandWidth: {
|
|
221
|
+
type: String,
|
|
222
|
+
required: true
|
|
223
|
+
},
|
|
224
|
+
hasTree: {
|
|
225
|
+
type: Boolean,
|
|
226
|
+
required: false
|
|
227
|
+
},
|
|
228
|
+
selectedRows: {
|
|
229
|
+
type: Array,
|
|
230
|
+
required: false
|
|
231
|
+
},
|
|
232
|
+
rowHeight: {
|
|
233
|
+
type: String,
|
|
234
|
+
required: true
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
emits: ['rowClick', 'toggleExpand', 'toggleSelect'],
|
|
238
|
+
methods: {
|
|
239
|
+
isSelected(row) {
|
|
240
|
+
return this.selectedRows.some(r => r[this.rowKey] === row[this.rowKey]);
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
</script>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="u-table2">
|
|
2
|
+
<view class="u-table2" :class="{ 'u-table-border': border }">
|
|
3
3
|
<scroll-view scroll-x class="u-table2-content" :style="{ height: height ? height + 'px' : 'auto' }" @scroll="onScroll">
|
|
4
4
|
<!-- 表头 -->
|
|
5
5
|
<view v-if="showHeader" class="u-table-header" :class="{ 'u-table-sticky': fixedHeader }" :style="{minWidth: scrollWidth}">
|
|
@@ -28,55 +28,42 @@
|
|
|
28
28
|
<!-- 表体 -->
|
|
29
29
|
<view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
|
|
30
30
|
<template v-if="data && data.length > 0">
|
|
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
|
-
<view v-for="childRow in row[treeProps.children]" :key="childRow[rowKey]"
|
|
66
|
-
class="u-table-row u-table-row-child">
|
|
67
|
-
<view v-for="(col2, col2Index) in columns" :key="col2.key" class="u-table-cell"
|
|
68
|
-
:style="cellStyleInner({row: childRow, column: col2,
|
|
69
|
-
rowIndex: index, columnIndex: col2Index, level: 1})">
|
|
70
|
-
<slot name="cell" :row="childRow" :column="col2" :prow="row"
|
|
71
|
-
:rowIndex="index" :columnIndex="col2Index" :level="1">
|
|
72
|
-
<view class="u-table-cell_content">
|
|
73
|
-
{{ childRow[col2.key] }}
|
|
74
|
-
</view>
|
|
75
|
-
</slot>
|
|
76
|
-
</view>
|
|
77
|
-
</view>
|
|
31
|
+
<table-row
|
|
32
|
+
v-for="(row, rowIndex) in sortedData"
|
|
33
|
+
:key="row[rowKey] || rowIndex"
|
|
34
|
+
:row="row"
|
|
35
|
+
:rowIndex="rowIndex"
|
|
36
|
+
:parent-row="null"
|
|
37
|
+
:columns="columns"
|
|
38
|
+
:tree-props="treeProps"
|
|
39
|
+
:row-key="rowKey"
|
|
40
|
+
:expanded-keys="expandedKeys"
|
|
41
|
+
:cell-style-inner="cellStyleInner"
|
|
42
|
+
:is-expanded="isExpanded"
|
|
43
|
+
:row-class-name="rowClassName"
|
|
44
|
+
:stripe="stripe"
|
|
45
|
+
:cell-class-name="cellClassName"
|
|
46
|
+
:get-fixed-class="getFixedClass"
|
|
47
|
+
:highlight-current-row="highlightCurrentRow"
|
|
48
|
+
:current-row="currentRow"
|
|
49
|
+
:handle-row-click="handleRowClick"
|
|
50
|
+
:toggle-expand="toggleExpand"
|
|
51
|
+
:level="1"
|
|
52
|
+
:rowHeight="rowHeight"
|
|
53
|
+
:hasTree="hasTree"
|
|
54
|
+
:selectedRows="selectedRows"
|
|
55
|
+
:expandWidth="expandWidth"
|
|
56
|
+
:computedMainCol="computedMainCol"
|
|
57
|
+
@toggle-select="toggleSelect"
|
|
58
|
+
@row-click="handleRowClick"
|
|
59
|
+
@toggle-expand="toggleExpand"
|
|
60
|
+
>
|
|
61
|
+
<template v-slot:cellChild="scope">
|
|
62
|
+
<slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
|
|
63
|
+
:rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
|
|
64
|
+
</slot>
|
|
78
65
|
</template>
|
|
79
|
-
</
|
|
66
|
+
</table-row>
|
|
80
67
|
</template>
|
|
81
68
|
<template v-else>
|
|
82
69
|
<slot name="empty">
|
|
@@ -90,7 +77,7 @@
|
|
|
90
77
|
<view v-if="showFixedColumnShadow" class="u-table-fixed-shadow" :style="{ height: tableHeight }">
|
|
91
78
|
<!-- 表头 -->
|
|
92
79
|
<view v-if="showHeader" class="u-table-header" :class="{ 'u-table-sticky': fixedHeader }" :style="{minWidth: scrollWidth}">
|
|
93
|
-
<view class="u-table-row">
|
|
80
|
+
<view class="u-table-row" :style="{height: headerHeight}">
|
|
94
81
|
<view v-for="(col, colIndex) in visibleFixedLeftColumns" :key="col.key" class="u-table-cell"
|
|
95
82
|
:style="headerColStyle(col)"
|
|
96
83
|
:class="[col.align ? 'u-text-' + col.align : '',
|
|
@@ -115,53 +102,42 @@
|
|
|
115
102
|
<!-- 表体 -->
|
|
116
103
|
<view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
|
|
117
104
|
<template v-if="data && data.length > 0">
|
|
118
|
-
<template v-for="(row,
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
:style="cellStyleInner({row: childRow, column: col2,
|
|
155
|
-
rowIndex: index, columnIndex: col2Index, level: 1})">
|
|
156
|
-
<slot name="cell" :row="childRow" :column="col2" :prow="row"
|
|
157
|
-
:rowIndex="index" :columnIndex="col2Index" :level="1">
|
|
158
|
-
<view class="u-table-cell_content">
|
|
159
|
-
{{ childRow[col2.key] }}
|
|
160
|
-
</view>
|
|
161
|
-
</slot>
|
|
162
|
-
</view>
|
|
163
|
-
</view>
|
|
164
|
-
</template>
|
|
105
|
+
<template v-for="(row, rowIndex) in sortedData" :key="row[rowKey] || rowIndex">
|
|
106
|
+
<!-- 子级渲染 (递归组件) -->
|
|
107
|
+
<table-row
|
|
108
|
+
:row="row"
|
|
109
|
+
:rowIndex="rowIndex"
|
|
110
|
+
:parent-row="null"
|
|
111
|
+
:columns="visibleFixedLeftColumns"
|
|
112
|
+
:tree-props="treeProps"
|
|
113
|
+
:row-key="rowKey"
|
|
114
|
+
:expanded-keys="expandedKeys"
|
|
115
|
+
:cell-style-inner="cellStyleInner"
|
|
116
|
+
:is-expanded="isExpanded"
|
|
117
|
+
:row-class-name="rowClassName"
|
|
118
|
+
:stripe="stripe"
|
|
119
|
+
:cell-class-name="cellClassName"
|
|
120
|
+
:get-fixed-class="getFixedClass"
|
|
121
|
+
:highlight-current-row="highlightCurrentRow"
|
|
122
|
+
:current-row="currentRow"
|
|
123
|
+
:handle-row-click="handleRowClick"
|
|
124
|
+
:toggle-expand="toggleExpand"
|
|
125
|
+
:level="1"
|
|
126
|
+
:rowHeight="rowHeight"
|
|
127
|
+
:hasTree="hasTree"
|
|
128
|
+
:selectedRows="selectedRows"
|
|
129
|
+
:expandWidth="expandWidth"
|
|
130
|
+
:computedMainCol="computedMainCol"
|
|
131
|
+
@toggle-select="toggleSelect"
|
|
132
|
+
@row-click="handleRowClick"
|
|
133
|
+
@toggle-expand="toggleExpand"
|
|
134
|
+
>
|
|
135
|
+
<template v-slot:cellChild="scope">
|
|
136
|
+
<slot name="cell" :row="scope.row" :column="scope.column" :prow="scope.prow"
|
|
137
|
+
:rowIndex="scope.rowIndex" :columnIndex="scope.columnIndex" :level="scope.level">
|
|
138
|
+
</slot>
|
|
139
|
+
</template>
|
|
140
|
+
</table-row>
|
|
165
141
|
</template>
|
|
166
142
|
</template>
|
|
167
143
|
</view>
|
|
@@ -171,9 +147,13 @@
|
|
|
171
147
|
|
|
172
148
|
<script>
|
|
173
149
|
import { addUnit, sleep } from '../../libs/function/index';
|
|
150
|
+
import tableRow from './tableRow.vue'; // 引入递归组件
|
|
174
151
|
|
|
175
152
|
export default {
|
|
176
153
|
name: 'u-table2',
|
|
154
|
+
components: {
|
|
155
|
+
tableRow // 注册递归组件
|
|
156
|
+
},
|
|
177
157
|
props: {
|
|
178
158
|
data: {
|
|
179
159
|
type: Array,
|
|
@@ -308,6 +288,19 @@ export default {
|
|
|
308
288
|
type: String,
|
|
309
289
|
default: '暂无数据'
|
|
310
290
|
},
|
|
291
|
+
// 添加mainCol属性，用于指定树形结构展开控制图标所在的列
|
|
292
|
+
mainCol: {
|
|
293
|
+
type: String,
|
|
294
|
+
default: ''
|
|
295
|
+
},
|
|
296
|
+
expandWidth: {
|
|
297
|
+
type: String,
|
|
298
|
+
default: '25px'
|
|
299
|
+
},
|
|
300
|
+
rowHeight: {
|
|
301
|
+
String,
|
|
302
|
+
default: '40px'
|
|
303
|
+
}
|
|
311
304
|
},
|
|
312
305
|
emits: [
|
|
313
306
|
'select', 'select-all', 'selection-change',
|
|
@@ -327,7 +320,8 @@ export default {
|
|
|
327
320
|
showFixedColumnShadow: false, // 是否显示固定列阴影
|
|
328
321
|
fixedLeftColumns: [], // 左侧固定列
|
|
329
322
|
tableHeight: 'auto', // 表格高度
|
|
330
|
-
|
|
323
|
+
headerHeight: 'auto', // 新增表头高度属性
|
|
324
|
+
hasTree: false // 新增属性，用于判断是否存在树形结构
|
|
331
325
|
}
|
|
332
326
|
},
|
|
333
327
|
mounted() {
|
|
@@ -400,6 +394,17 @@ export default {
|
|
|
400
394
|
}
|
|
401
395
|
|
|
402
396
|
return visibleColumns;
|
|
397
|
+
},
|
|
398
|
+
// 获取mainCol的值，如果未设置则默认为第一列的key
|
|
399
|
+
computedMainCol() {
|
|
400
|
+
if (this.mainCol) {
|
|
401
|
+
return this.mainCol;
|
|
402
|
+
}
|
|
403
|
+
// 修改为排除有type值的列
|
|
404
|
+
const validColumns = this.columns.filter(col => !col.type);
|
|
405
|
+
let mainCol = validColumns && validColumns.length > 0 ? validColumns[0].key : '';
|
|
406
|
+
// console.log('mainCol', mainCol)
|
|
407
|
+
return mainCol;
|
|
403
408
|
}
|
|
404
409
|
},
|
|
405
410
|
watch: {
|
|
@@ -472,9 +477,12 @@ export default {
|
|
|
472
477
|
cellStyleInner(scope) {
|
|
473
478
|
let style = {
|
|
474
479
|
width: scope.column?.width ? addUnit(scope.column.width) : 'auto',
|
|
475
|
-
flex: scope.column?.width ? 'none' : 1
|
|
476
|
-
paddingLeft: (24 * scope.level) + 'px'
|
|
480
|
+
flex: scope.column?.width ? 'none' : 1
|
|
477
481
|
};
|
|
482
|
+
// 只有展开列设置padding
|
|
483
|
+
if (scope.column.key == this.computedMainCol) {
|
|
484
|
+
style.paddingLeft = (16 * (scope.level -1 )) + 2 + 'px'
|
|
485
|
+
}
|
|
478
486
|
if (this.cellStyle != null) {
|
|
479
487
|
let styleCalc = this.cellStyle(scope)
|
|
480
488
|
if (styleCalc != null) {
|
|
@@ -491,10 +499,17 @@ export default {
|
|
|
491
499
|
this.scrollWidth = size.width + 'px'
|
|
492
500
|
})
|
|
493
501
|
|
|
494
|
-
//
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
502
|
+
// 获取表头高度并设置
|
|
503
|
+
this.$uGetRect('.u-table-header').then(size => {
|
|
504
|
+
if (size.height) {
|
|
505
|
+
this.headerHeight = size.height + 'px';
|
|
506
|
+
}
|
|
507
|
+
})
|
|
508
|
+
|
|
509
|
+
// 遍历数据列表第一层判断是否存在树形结构
|
|
510
|
+
this.hasTree = this.sortedData.some(item => {
|
|
511
|
+
return item[this.treeProps.children] && item[this.treeProps.children].length > 0;
|
|
512
|
+
});
|
|
498
513
|
},
|
|
499
514
|
// 将setup中的函数转换为methods
|
|
500
515
|
handleRowClick(row) {
|
|
@@ -546,17 +561,22 @@ export default {
|
|
|
546
561
|
toggleSelect(row) {
|
|
547
562
|
const index = this.selectedRows.findIndex(r => r[this.rowKey] === row[this.rowKey]);
|
|
548
563
|
if (index >= 0) {
|
|
564
|
+
// 取消选中当前行及其所有子节点
|
|
549
565
|
this.selectedRows.splice(index, 1);
|
|
566
|
+
// 递归取消所有子节点
|
|
567
|
+
this.unselectChildren(row);
|
|
550
568
|
} else {
|
|
569
|
+
// 选中当前行及其所有子节点
|
|
551
570
|
this.selectedRows.push(row);
|
|
571
|
+
// 递归选中所有子节点
|
|
572
|
+
this.selectChildren(row);
|
|
552
573
|
}
|
|
574
|
+
console.log(this.selectedRows)
|
|
553
575
|
this.$emit('selection-change', this.selectedRows);
|
|
554
576
|
this.$emit('select', row);
|
|
555
577
|
},
|
|
556
|
-
isSelected(row) {
|
|
557
|
-
return this.selectedRows.some(r => r[this.rowKey] === row[this.rowKey]);
|
|
558
|
-
},
|
|
559
578
|
toggleExpand(row) {
|
|
579
|
+
// console.log(row)
|
|
560
580
|
const key = row[this.rowKey];
|
|
561
581
|
const index = this.expandedKeys.indexOf(key);
|
|
562
582
|
if (index === -1) {
|
|
@@ -567,17 +587,45 @@ export default {
|
|
|
567
587
|
this.$emit('expand-change', this.expandedKeys);
|
|
568
588
|
},
|
|
569
589
|
isExpanded(row) {
|
|
590
|
+
if (!row) {
|
|
591
|
+
return false;
|
|
592
|
+
}
|
|
570
593
|
return this.expandedKeys.includes(row[this.rowKey]);
|
|
571
|
-
}
|
|
594
|
+
},
|
|
595
|
+
// 新增方法：递归选中所有子节点
|
|
596
|
+
selectChildren(row) {
|
|
597
|
+
const children = row[this.treeProps.children];
|
|
598
|
+
if (children && children.length > 0) {
|
|
599
|
+
children.forEach(child => {
|
|
600
|
+
// 检查是否已选中，避免重复添加
|
|
601
|
+
const childIndex = this.selectedRows.findIndex(r => r[this.rowKey] === child[this.rowKey]);
|
|
602
|
+
if (childIndex === -1) {
|
|
603
|
+
this.selectedRows.push(child);
|
|
604
|
+
}
|
|
605
|
+
// 递归处理子节点的子节点
|
|
606
|
+
this.selectChildren(child);
|
|
607
|
+
});
|
|
608
|
+
}
|
|
609
|
+
},
|
|
610
|
+
// 新增方法：递归取消选中所有子节点
|
|
611
|
+
unselectChildren(row) {
|
|
612
|
+
const children = row[this.treeProps.children];
|
|
613
|
+
if (children && children.length > 0) {
|
|
614
|
+
children.forEach(child => {
|
|
615
|
+
const childIndex = this.selectedRows.findIndex(r => r[this.rowKey] === child[this.rowKey]);
|
|
616
|
+
if (childIndex >= 0) {
|
|
617
|
+
this.selectedRows.splice(childIndex, 1);
|
|
618
|
+
}
|
|
619
|
+
// 递归处理子节点的子节点
|
|
620
|
+
this.unselectChildren(child);
|
|
621
|
+
});
|
|
622
|
+
}
|
|
623
|
+
},
|
|
572
624
|
}
|
|
573
625
|
};
|
|
574
626
|
</script>
|
|
575
627
|
|
|
576
628
|
<style lang="scss" scoped>
|
|
577
|
-
.u-table2-wrapper {
|
|
578
|
-
position: relative;
|
|
579
|
-
}
|
|
580
|
-
|
|
581
629
|
.u-table2 {
|
|
582
630
|
width: auto;
|
|
583
631
|
overflow: auto;
|
|
@@ -606,21 +654,36 @@ export default {
|
|
|
606
654
|
display: flex;
|
|
607
655
|
flex-direction: row;
|
|
608
656
|
align-items: center;
|
|
609
|
-
border-bottom:
|
|
657
|
+
border-bottom: 1px solid #ebeef5;
|
|
610
658
|
overflow: hidden;
|
|
611
659
|
position: relative;
|
|
612
|
-
min-height: 40px;
|
|
660
|
+
// min-height: 40px;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
// 添加border样式支持
|
|
664
|
+
&.u-table-border {
|
|
665
|
+
border-top: 1px solid #ebeef5;
|
|
666
|
+
border-left: 1px solid #ebeef5;
|
|
667
|
+
border-right: 1px solid #ebeef5;
|
|
668
|
+
.u-table-cell {
|
|
669
|
+
border-right: 1px solid #ebeef5;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.u-table-cell:last-child {
|
|
673
|
+
border-right: none;
|
|
674
|
+
}
|
|
613
675
|
}
|
|
614
676
|
|
|
615
677
|
.u-table-cell {
|
|
616
678
|
flex: 1;
|
|
617
679
|
display: flex;
|
|
618
680
|
flex-direction: row;
|
|
619
|
-
padding:
|
|
681
|
+
padding: 10px 10px;
|
|
620
682
|
font-size: 14px;
|
|
621
683
|
white-space: nowrap;
|
|
622
684
|
overflow: hidden;
|
|
623
685
|
text-overflow: ellipsis;
|
|
686
|
+
line-height: 1.1;
|
|
624
687
|
}
|
|
625
688
|
|
|
626
689
|
.u-table-row-zebra {
|
|
@@ -662,23 +725,22 @@ export default {
|
|
|
662
725
|
background-color: #ffffff;
|
|
663
726
|
}
|
|
664
727
|
|
|
665
|
-
.u-table-fixed-row {
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
}
|
|
728
|
+
// .u-table-fixed-row {
|
|
729
|
+
// display: flex;
|
|
730
|
+
// flex-direction: row;
|
|
731
|
+
// align-items: center;
|
|
732
|
+
// border-bottom: 1rpx solid #ebeef5;
|
|
733
|
+
// position: relative;
|
|
734
|
+
// }
|
|
672
735
|
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
background-color: #fff;
|
|
736
|
+
// 为固定列也添加border样式支持
|
|
737
|
+
.u-table-fixed-shadow .u-table-border {
|
|
738
|
+
.u-table-cell {
|
|
739
|
+
border-right: 1rpx solid #ebeef5;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.u-table-cell:last-child {
|
|
743
|
+
border-right: none;
|
|
744
|
+
}
|
|
683
745
|
}
|
|
684
746
|
</style>
|
package/package.json
CHANGED