uview-plus 3.4.33 → 3.4.34
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 +3 -0
- package/components/u-table2/u-table2.vue +55 -14
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -4,7 +4,8 @@
|
|
|
4
4
|
<view v-if="showHeader" class="u-table-header" :class="{ 'u-table-sticky': fixedHeader }" :style="{minWidth: scrollWidth}">
|
|
5
5
|
<view class="u-table-row">
|
|
6
6
|
<view v-for="(col, colIndex) in columns" :key="col.key" class="u-table-cell"
|
|
7
|
-
:style="
|
|
7
|
+
:style="headerColStyle(col)"
|
|
8
|
+
:class="[
|
|
8
9
|
col.align ? 'u-text-' + col.align : '',
|
|
9
10
|
headerCellClassName ? headerCellClassName(col) : '',
|
|
10
11
|
col.fixed === 'left' ? 'u-table-fixed-left' : '',
|
|
@@ -27,24 +28,29 @@
|
|
|
27
28
|
rowClassName ? rowClassName(row, index) : '',
|
|
28
29
|
stripe && index % 2 === 1 ? 'u-table-row-zebra' : ''
|
|
29
30
|
]" @click="handleRowClick(row)">
|
|
30
|
-
<view v-for="(col, colIndex) in columns" :key="col.key"
|
|
31
|
+
<view v-for="(col, colIndex) in columns" :key="col.key"
|
|
32
|
+
class="u-table-cell" :class="[
|
|
31
33
|
col.align ? 'u-text-' + col.align : '',
|
|
32
34
|
cellClassName ? cellClassName(row, col) : '',
|
|
33
35
|
col.fixed === 'left' ? 'u-table-fixed-left' : '',
|
|
34
36
|
col.fixed === 'right' ? 'u-table-fixed-right' : ''
|
|
35
|
-
]" :style="{
|
|
37
|
+
]" :style="cellStyleInner({row: row, column: col,
|
|
38
|
+
rowIndex: index, columnIndex: colIndex, level: 0})">
|
|
36
39
|
<!-- 复选框列 -->
|
|
37
40
|
<view v-if="col.type === 'selection'">
|
|
38
|
-
<checkbox :checked="isSelected(row)"
|
|
41
|
+
<checkbox :checked="isSelected(row)"
|
|
42
|
+
@click.stop="toggleSelect(row)" />
|
|
39
43
|
</view>
|
|
40
44
|
|
|
41
45
|
<!-- 树形结构展开图标 -->
|
|
42
|
-
<view v-else-if="col.type === 'expand'"
|
|
46
|
+
<view v-else-if="col.type === 'expand'"
|
|
47
|
+
@click.stop="toggleExpand(row)">
|
|
43
48
|
{{ isExpanded(row) ? '▼' : '▶' }}
|
|
44
49
|
</view>
|
|
45
50
|
|
|
46
51
|
<!-- 默认插槽或文本 -->
|
|
47
|
-
<slot name="cell" :row="row" :
|
|
52
|
+
<slot name="cell" :row="row" :column="col"
|
|
53
|
+
:rowIndex="index" :columnIndex="colIndex">
|
|
48
54
|
<view class="u-table-cell_content">
|
|
49
55
|
{{ row[col.key] }}
|
|
50
56
|
</view>
|
|
@@ -54,13 +60,15 @@
|
|
|
54
60
|
|
|
55
61
|
<!-- 子级渲染 -->
|
|
56
62
|
<template v-if="isExpanded(row) && row[treeProps.children] && row[treeProps.children].length">
|
|
57
|
-
<view v-for="
|
|
63
|
+
<view v-for="childRow in row[treeProps.children]" :key="childRow[rowKey]"
|
|
58
64
|
class="u-table-row u-table-row-child">
|
|
59
|
-
<view v-for="
|
|
60
|
-
:style="{
|
|
61
|
-
|
|
65
|
+
<view v-for="(col2, col2Index) in columns" :key="col2.key" class="u-table-cell"
|
|
66
|
+
:style="cellStyleInner({row: childRow, column: col2,
|
|
67
|
+
rowIndex: index, columnIndex: col2Index, level: 1})">
|
|
68
|
+
<slot name="cell" :row="childRow" :column="col2" :prow="row"
|
|
69
|
+
:rowIndex="index" :columnIndex="col2Index" :level="1">
|
|
62
70
|
<view class="u-table-cell_content">
|
|
63
|
-
{{
|
|
71
|
+
{{ childRow[col2.key] }}
|
|
64
72
|
</view>
|
|
65
73
|
</slot>
|
|
66
74
|
</view>
|
|
@@ -141,7 +149,11 @@ export default {
|
|
|
141
149
|
cellClassName: {
|
|
142
150
|
type: Function,
|
|
143
151
|
default: null
|
|
144
|
-
},
|
|
152
|
+
},
|
|
153
|
+
cellStyle: {
|
|
154
|
+
type: Function,
|
|
155
|
+
default: null
|
|
156
|
+
},
|
|
145
157
|
headerCellClassName: {
|
|
146
158
|
type: Function,
|
|
147
159
|
default: null
|
|
@@ -227,9 +239,38 @@ export default {
|
|
|
227
239
|
},
|
|
228
240
|
mounted() {
|
|
229
241
|
this.getComponentWidth()
|
|
230
|
-
},
|
|
242
|
+
},
|
|
243
|
+
computed: {
|
|
244
|
+
},
|
|
231
245
|
methods: {
|
|
232
|
-
addUnit,
|
|
246
|
+
addUnit,
|
|
247
|
+
headerColStyle(col) {
|
|
248
|
+
let style = {
|
|
249
|
+
width: col.width ? addUnit(col.width) : 'auto',
|
|
250
|
+
flex: col.width ? 'none' : 1
|
|
251
|
+
};
|
|
252
|
+
if (col?.style) {
|
|
253
|
+
style = {...style, ...col?.style};
|
|
254
|
+
}
|
|
255
|
+
return style;
|
|
256
|
+
},
|
|
257
|
+
setCellStyle(e) {
|
|
258
|
+
this.cellStyle = e
|
|
259
|
+
},
|
|
260
|
+
cellStyleInner(scope) {
|
|
261
|
+
let style = {
|
|
262
|
+
width: scope.column?.width ? addUnit(scope.column.width) : 'auto',
|
|
263
|
+
flex: scope.column?.width ? 'none' : 1,
|
|
264
|
+
paddingLeft: (24 * scope.level) + 'px'
|
|
265
|
+
};
|
|
266
|
+
if (this.cellStyle != null) {
|
|
267
|
+
let styleCalc = this.cellStyle(scope)
|
|
268
|
+
if (styleCalc != null) {
|
|
269
|
+
style = {...style, ...styleCalc}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
return style;
|
|
273
|
+
},
|
|
233
274
|
// 获取组件的宽度
|
|
234
275
|
async getComponentWidth() {
|
|
235
276
|
// 延时一定时间，以获取dom尺寸
|
package/package.json
CHANGED