br-dionysus 1.8.4 → 1.8.5
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/README.md +656 -52
- package/attributes.json +1 -1
- package/cypress/e2e/2-advanced-examples/actions.cy.js +3 -3
- package/cypress/e2e/2-advanced-examples/assertions.cy.js +2 -2
- package/cypress/e2e/2-advanced-examples/cypress_api.cy.js +5 -6
- package/cypress/e2e/2-advanced-examples/files.cy.js +1 -1
- package/cypress/e2e/2-advanced-examples/misc.cy.js +1 -1
- package/cypress/e2e/2-advanced-examples/navigation.cy.js +1 -1
- package/cypress/e2e/2-advanced-examples/network_requests.cy.js +22 -22
- package/cypress/e2e/2-advanced-examples/spies_stubs_clocks.cy.js +7 -7
- package/cypress/e2e/2-advanced-examples/storage.cy.js +8 -8
- package/cypress/e2e/2-advanced-examples/utilities.cy.js +15 -15
- package/dist/br-dionysus.es.js +3597 -3492
- package/dist/br-dionysus.umd.js +8 -8
- package/dist/index.css +1 -1
- package/dist/packages/MTableSuper/index.d.ts +4 -0
- package/dist/packages/MTableSuper/src/MTableSuper.vue.d.ts +11 -0
- package/dist/packages/MTableSuper/src/token.d.ts +23 -0
- package/dist/packages/MTableV2/src/MTableV2.vue.d.ts +7 -0
- package/dist/packages/index.d.ts +1 -0
- package/package.json +1 -1
- package/packages/Hook/useTableConfig/demo.vue +1 -1
- package/packages/Hook/useTableConfig/useTableConfig.ts +9 -9
- package/packages/MDialog/src/MDialog.vue +12 -1
- package/packages/MSelectTable/src/MSelectTable.vue +1 -1
- package/packages/MTable/src/MTable.vue +0 -32
- package/packages/MTableColumn/src/MTableColumn.vue +0 -41
- package/packages/MTableSuper/docs/README.md +48 -0
- package/packages/MTableSuper/docs/demo.vue +246 -0
- package/packages/MTableSuper/index.ts +10 -0
- package/packages/MTableSuper/src/MTableSuper.vue +140 -0
- package/packages/MTableSuper/src/token.ts +24 -0
- package/packages/MTableV2/docs/README.md +1 -0
- package/packages/MTableV2/docs/demo.vue +9 -7
- package/packages/MTableV2/src/MTableV2.vue +49 -5
- package/packages/index.ts +3 -0
- package/packages/list.json +6 -0
- package/packages/typings/global.d.ts +2 -2
- package/src/router.ts +5 -0
- package/tags.json +1 -1
- package/web-types.json +1 -1
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="g-box">
|
|
3
|
+
<h3>基础功能</h3>
|
|
4
|
+
<MTableSuper
|
|
5
|
+
:data="tableData"
|
|
6
|
+
v-if="!tableData"
|
|
7
|
+
border
|
|
8
|
+
>
|
|
9
|
+
<MTableColumn
|
|
10
|
+
v-for="item in tableTitle"
|
|
11
|
+
:key="item.prop"
|
|
12
|
+
:prop="item.prop"
|
|
13
|
+
:label="item.label"
|
|
14
|
+
:align="item.align"
|
|
15
|
+
:minWidth="item.minWidth"
|
|
16
|
+
:className="item.className"
|
|
17
|
+
:filters="item.filters"
|
|
18
|
+
:headerAlign="item.headerAlign"
|
|
19
|
+
:fixed="item.fixed"
|
|
20
|
+
v-model:filtersValue="filtersValue"
|
|
21
|
+
showOverflowTooltip
|
|
22
|
+
></MTableColumn>
|
|
23
|
+
</MTableSuper>
|
|
24
|
+
<h3>带选择的表格</h3>
|
|
25
|
+
<MTableSuper
|
|
26
|
+
:data="tableData"
|
|
27
|
+
border
|
|
28
|
+
>
|
|
29
|
+
<el-table-column
|
|
30
|
+
fixed="left"
|
|
31
|
+
type="selection"
|
|
32
|
+
/>
|
|
33
|
+
<el-table-column
|
|
34
|
+
prop="name"
|
|
35
|
+
label="名称"
|
|
36
|
+
>
|
|
37
|
+
<el-table-column
|
|
38
|
+
prop="date"
|
|
39
|
+
label="时间"
|
|
40
|
+
></el-table-column>
|
|
41
|
+
<el-table-column
|
|
42
|
+
prop="address"
|
|
43
|
+
label="地址"
|
|
44
|
+
></el-table-column>
|
|
45
|
+
</el-table-column>
|
|
46
|
+
<MTableColumn
|
|
47
|
+
v-for="item in tableTitle"
|
|
48
|
+
:key="item.prop"
|
|
49
|
+
:prop="item.prop"
|
|
50
|
+
:label="item.label"
|
|
51
|
+
:align="item.align"
|
|
52
|
+
:minWidth="item.minWidth"
|
|
53
|
+
:className="item.className"
|
|
54
|
+
:filters="item.filters"
|
|
55
|
+
:headerAlign="item.headerAlign"
|
|
56
|
+
:fixed="item.fixed"
|
|
57
|
+
v-model:filtersValue="filtersValue"
|
|
58
|
+
showOverflowTooltip
|
|
59
|
+
>
|
|
60
|
+
</MTableColumn>
|
|
61
|
+
</MTableSuper>
|
|
62
|
+
<h3>展开列</h3>
|
|
63
|
+
<MTableSuper
|
|
64
|
+
v-if="!tableData"
|
|
65
|
+
class="style.box"
|
|
66
|
+
:data="tableData"
|
|
67
|
+
border
|
|
68
|
+
:filtersValue="filtersValue"
|
|
69
|
+
scrollbarAlwaysOn
|
|
70
|
+
v-model:tableConfig="tableConfig"
|
|
71
|
+
rowKey="id"
|
|
72
|
+
tableConfigKey="tableConfigKey"
|
|
73
|
+
@headerDragend="headerDragend"
|
|
74
|
+
expandProp="sn"
|
|
75
|
+
@privateExpandChange="privateExpandChange"
|
|
76
|
+
>
|
|
77
|
+
<el-table-column
|
|
78
|
+
fixed="left"
|
|
79
|
+
type="selection"
|
|
80
|
+
/>
|
|
81
|
+
<MTableColumn
|
|
82
|
+
type="expand"
|
|
83
|
+
width="1"
|
|
84
|
+
>
|
|
85
|
+
<template #default="props">
|
|
86
|
+
<h1>index{{ props.index }}</h1>
|
|
87
|
+
<h1>$index{{ props.$index }}</h1>
|
|
88
|
+
<h1>测试</h1>
|
|
89
|
+
</template>
|
|
90
|
+
</MTableColumn>
|
|
91
|
+
<MTableColumn
|
|
92
|
+
v-for="item in tableTitle"
|
|
93
|
+
:key="item.prop"
|
|
94
|
+
:prop="item.prop"
|
|
95
|
+
:label="item.label"
|
|
96
|
+
:align="item.align"
|
|
97
|
+
:minWidth="item.minWidth"
|
|
98
|
+
:className="item.className"
|
|
99
|
+
:filters="item.filters"
|
|
100
|
+
:headerAlign="item.headerAlign"
|
|
101
|
+
:fixed="item.fixed"
|
|
102
|
+
v-model:filtersValue="filtersValue"
|
|
103
|
+
showOverflowTooltip
|
|
104
|
+
>
|
|
105
|
+
</MTableColumn>
|
|
106
|
+
</MTableSuper>
|
|
107
|
+
<h3>树状表格</h3>
|
|
108
|
+
<MTableSuper
|
|
109
|
+
v-if="!tableData"
|
|
110
|
+
class="style.box"
|
|
111
|
+
:data="tableData"
|
|
112
|
+
border
|
|
113
|
+
@headerDragend="headerDragend"
|
|
114
|
+
:filtersValue="filtersValue"
|
|
115
|
+
scrollbarAlwaysOn
|
|
116
|
+
v-model:tableConfig="tableConfig"
|
|
117
|
+
rowKey="id"
|
|
118
|
+
tableConfigKey="tableConfigKey"
|
|
119
|
+
@expandChange="privateExpandChange"
|
|
120
|
+
>
|
|
121
|
+
<MTableColumn
|
|
122
|
+
v-for="item in tableTitle"
|
|
123
|
+
:key="item.prop"
|
|
124
|
+
:prop="item.prop"
|
|
125
|
+
:label="item.label"
|
|
126
|
+
:align="item.align"
|
|
127
|
+
:minWidth="item.minWidth"
|
|
128
|
+
:className="item.className"
|
|
129
|
+
:filters="item.filters"
|
|
130
|
+
:headerAlign="item.headerAlign"
|
|
131
|
+
:fixed="item.fixed"
|
|
132
|
+
v-model:filtersValue="filtersValue"
|
|
133
|
+
showOverflowTooltip
|
|
134
|
+
>
|
|
135
|
+
</MTableColumn>
|
|
136
|
+
</MTableSuper>
|
|
137
|
+
</div>
|
|
138
|
+
</template>
|
|
139
|
+
|
|
140
|
+
<script setup lang="ts">
|
|
141
|
+
import { ref } from 'vue'
|
|
142
|
+
import { useTableConfig } from 'packages/index'
|
|
143
|
+
import { MTableColumn } from 'packages/MTableColumn'
|
|
144
|
+
|
|
145
|
+
const privateExpandChange = (row: any, expandedRows: any[]) => {
|
|
146
|
+
console.log('row', row)
|
|
147
|
+
console.log('expandedRows', expandedRows)
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// const test = (data: any) => {
|
|
151
|
+
// console.log('data', data)
|
|
152
|
+
// }
|
|
153
|
+
|
|
154
|
+
const tableData = ref<any[]>([])
|
|
155
|
+
const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
|
|
156
|
+
label: '序号',
|
|
157
|
+
prop: 'sn',
|
|
158
|
+
minWidth: 200
|
|
159
|
+
// fixed: 'right'
|
|
160
|
+
}, {
|
|
161
|
+
label: '时间',
|
|
162
|
+
prop: 'date',
|
|
163
|
+
minWidth: 200
|
|
164
|
+
// fixed: 'left'
|
|
165
|
+
}, {
|
|
166
|
+
label: '地址',
|
|
167
|
+
prop: 'address',
|
|
168
|
+
minWidth: 200
|
|
169
|
+
}, {
|
|
170
|
+
label: '名称',
|
|
171
|
+
prop: 'name',
|
|
172
|
+
minWidth: 200
|
|
173
|
+
}], tableData)
|
|
174
|
+
console.log('tableTitle', tableTitle.value)
|
|
175
|
+
|
|
176
|
+
tableData.value = [{
|
|
177
|
+
id: 1,
|
|
178
|
+
sn: 1,
|
|
179
|
+
date: '2016-05-03',
|
|
180
|
+
name: 'Tom1',
|
|
181
|
+
address: 'No. 189',
|
|
182
|
+
tag: 'Home',
|
|
183
|
+
pid: 0
|
|
184
|
+
}, {
|
|
185
|
+
id: 2,
|
|
186
|
+
sn: 2,
|
|
187
|
+
date: '2016-05-02',
|
|
188
|
+
name: 'Tom2',
|
|
189
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
190
|
+
tag: 'Office',
|
|
191
|
+
pid: 0,
|
|
192
|
+
children: [{
|
|
193
|
+
id: 21,
|
|
194
|
+
sn: 1,
|
|
195
|
+
date: '2016-05-02',
|
|
196
|
+
name: 'Tom21',
|
|
197
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
198
|
+
tag: 'Office'
|
|
199
|
+
}, {
|
|
200
|
+
id: 22,
|
|
201
|
+
sn: 2,
|
|
202
|
+
date: '2016-05-02',
|
|
203
|
+
name: 'Tom22',
|
|
204
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
205
|
+
tag: 'Office'
|
|
206
|
+
}]
|
|
207
|
+
}, {
|
|
208
|
+
id: 3,
|
|
209
|
+
sn: 3,
|
|
210
|
+
date: '2016-05-04',
|
|
211
|
+
name: 'Tom3',
|
|
212
|
+
address: 'No. 189',
|
|
213
|
+
tag: 'Home',
|
|
214
|
+
pid: 0
|
|
215
|
+
}, {
|
|
216
|
+
id: 4,
|
|
217
|
+
sn: 4,
|
|
218
|
+
date: '2016-05-01',
|
|
219
|
+
name: 'Tom4',
|
|
220
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
221
|
+
tag: 'Office',
|
|
222
|
+
pid: 0
|
|
223
|
+
}, {
|
|
224
|
+
id: 5,
|
|
225
|
+
sn: 5,
|
|
226
|
+
date: '2016-05-05',
|
|
227
|
+
name: 'Tom4',
|
|
228
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
229
|
+
tag: 'Office',
|
|
230
|
+
pid: 0
|
|
231
|
+
}, {
|
|
232
|
+
id: 6,
|
|
233
|
+
sn: 6,
|
|
234
|
+
date: '2016-06-01',
|
|
235
|
+
name: 'Tom4',
|
|
236
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
237
|
+
tag: 'Office',
|
|
238
|
+
pid: 0
|
|
239
|
+
}]
|
|
240
|
+
</script>
|
|
241
|
+
|
|
242
|
+
<style lang="scss" scoped>
|
|
243
|
+
.g-box {
|
|
244
|
+
max-width: 1000px;
|
|
245
|
+
}
|
|
246
|
+
</style>
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="br-m-table-super-box">
|
|
3
|
+
<MTable
|
|
4
|
+
v-if="showTableV2Mode"
|
|
5
|
+
v-bind="attrs"
|
|
6
|
+
v-on="attrs"
|
|
7
|
+
>
|
|
8
|
+
<slot name="default"></slot>
|
|
9
|
+
<slot name="append"></slot>
|
|
10
|
+
<slot name="empty"></slot>
|
|
11
|
+
</MTable>
|
|
12
|
+
<MTableV2
|
|
13
|
+
v-if="showTableV2Mode"
|
|
14
|
+
:data="tableData"
|
|
15
|
+
:height="400"
|
|
16
|
+
border
|
|
17
|
+
fixed
|
|
18
|
+
:columns="tableColumn"
|
|
19
|
+
cellWidthAdaptive
|
|
20
|
+
></MTableV2>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script setup lang="ts">
|
|
25
|
+
import { useAttrs, useSlots, computed, createVNode, unref, ref } from 'vue'
|
|
26
|
+
import { MTableV2 } from 'packages/MTableV2'
|
|
27
|
+
import { MTable } from 'packages/MTable'
|
|
28
|
+
import { ElCheckbox } from 'element-plus'
|
|
29
|
+
|
|
30
|
+
const attrs = useAttrs()
|
|
31
|
+
interface Slots {
|
|
32
|
+
default?: () => any[]
|
|
33
|
+
}
|
|
34
|
+
const slots: Slots = useSlots()
|
|
35
|
+
// const slotsDefault = slots.default as Function
|
|
36
|
+
// console.log('slots', slotsDefault())
|
|
37
|
+
|
|
38
|
+
const selectionDom = {
|
|
39
|
+
key: 'selection',
|
|
40
|
+
width: 50,
|
|
41
|
+
cellRenderer: ({ rowData }: any) => {
|
|
42
|
+
const onChange = (value: any) => (rowData.checked = value)
|
|
43
|
+
return createVNode(ElCheckbox, {
|
|
44
|
+
modelValue: rowData.checked,
|
|
45
|
+
indeterminate: false,
|
|
46
|
+
'onUpdate:modelValue': onChange
|
|
47
|
+
})
|
|
48
|
+
},
|
|
49
|
+
headerCellRenderer: () => {
|
|
50
|
+
const allSelected = unref(tableData.value).every((row: any) => row.checked)
|
|
51
|
+
const containsChecked = unref(tableData.value).some((row: any) => row.checked)
|
|
52
|
+
const onChange = (value: any) => {
|
|
53
|
+
tableData.value = unref(tableData).map((row: any) => {
|
|
54
|
+
row.checked = value
|
|
55
|
+
return row
|
|
56
|
+
})
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
return createVNode(ElCheckbox, {
|
|
60
|
+
modelValue: allSelected,
|
|
61
|
+
indeterminate: containsChecked && !allSelected,
|
|
62
|
+
'onUpdate:modelValue': onChange
|
|
63
|
+
})
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
interface GetColumnReturn extends TableTitle {
|
|
68
|
+
key?: string,
|
|
69
|
+
cellRenderer?: any,
|
|
70
|
+
headerCellRenderer?: any,
|
|
71
|
+
children?: GetColumnReturn[]
|
|
72
|
+
}
|
|
73
|
+
const getColumn = (slots: Slots, data: GetColumnReturn[] = []): GetColumnReturn[] => {
|
|
74
|
+
const slotsDefault = slots.default as Function | undefined
|
|
75
|
+
const slotsDefaultData: any[] = slotsDefault ? slotsDefault() : slots
|
|
76
|
+
// console.log('slotsDefaultData', slotsDefaultData)
|
|
77
|
+
|
|
78
|
+
const list = slotsDefaultData.filter(item => item?.props?.type !== 'expand')
|
|
79
|
+
for (let i = 0; i < list.length; i++) {
|
|
80
|
+
const item = list[i]
|
|
81
|
+
|
|
82
|
+
const children = item.children
|
|
83
|
+
|
|
84
|
+
const node = {
|
|
85
|
+
...item.props,
|
|
86
|
+
children: []
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
const isSelection = node.type === 'selection'
|
|
90
|
+
if (isSelection) {
|
|
91
|
+
data.push(selectionDom)
|
|
92
|
+
continue
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
const isForTemp = !item.props
|
|
96
|
+
if (isForTemp) {
|
|
97
|
+
data.push(...getColumn(children))
|
|
98
|
+
continue
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
const isChildren = Boolean(children)
|
|
102
|
+
if (isChildren) node.children = getColumn(children)
|
|
103
|
+
|
|
104
|
+
data.push(node)
|
|
105
|
+
}
|
|
106
|
+
return data
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
const tableTitleToTableV2Title = (tableTitle: GetColumnReturn[]): TableV2Title[] => {
|
|
110
|
+
// console.log('tableTitle', tableTitle)
|
|
111
|
+
return tableTitle.map(item => {
|
|
112
|
+
return {
|
|
113
|
+
title: item.label,
|
|
114
|
+
key: item.prop,
|
|
115
|
+
dataKey: item.prop,
|
|
116
|
+
...(item.align ? { align: item.align } : {}),
|
|
117
|
+
...(item.className ? { class: item.className } : {}),
|
|
118
|
+
...(item.fixed ? { fixed: item.fixed } : {}),
|
|
119
|
+
...(item.labelClassName ? { headerClass: item.labelClassName } : {}),
|
|
120
|
+
...(item.minWidth ? { minWidth: item.minWidth || item.width } : {}),
|
|
121
|
+
...(item.width || item.minWidth ? { width: item.width || item.minWidth || 100 } : {})
|
|
122
|
+
} as TableV2Title
|
|
123
|
+
})
|
|
124
|
+
}
|
|
125
|
+
const tableColumn: any = tableTitleToTableV2Title(getColumn(slots))
|
|
126
|
+
// console.log('tableColumn', tableColumn)
|
|
127
|
+
// console.log('getColumn(slots)[0].children', getColumn(slots)[0].children)
|
|
128
|
+
|
|
129
|
+
const tableData = ref<any[]>(attrs?.data as any[] || [])
|
|
130
|
+
/** 切换阈值 */
|
|
131
|
+
const switchThreshold = 5
|
|
132
|
+
/** 是否为虚拟化表格模式 */
|
|
133
|
+
const showTableV2Mode = computed(() => tableData.value?.length > switchThreshold)
|
|
134
|
+
</script>
|
|
135
|
+
|
|
136
|
+
<style scoped lang="scss">
|
|
137
|
+
</style>
|
|
138
|
+
|
|
139
|
+
<style lang="scss">
|
|
140
|
+
</style>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { InjectionKey } from 'vue'
|
|
2
|
+
import type { Ref } from 'vue'
|
|
3
|
+
import { TableConfig } from 'packages/Hook/useTableConfig/useTableConfig'
|
|
4
|
+
|
|
5
|
+
export const tableKey: InjectionKey<{
|
|
6
|
+
/** 表格列配置 */
|
|
7
|
+
tableConfig: Ref<TableConfig>,
|
|
8
|
+
/** 最后一列 */
|
|
9
|
+
lastColumnProp: Ref<string>,
|
|
10
|
+
/** 展开图标列 */
|
|
11
|
+
expandProp: string,
|
|
12
|
+
/** 表格数据 */
|
|
13
|
+
tableData: Ref<any[]>,
|
|
14
|
+
/** 展开列 */
|
|
15
|
+
expandRowKeys: Ref<any[] | null>,
|
|
16
|
+
/** 行数据的 Key */
|
|
17
|
+
rowKey: Function | string,
|
|
18
|
+
/** 表格配置key */
|
|
19
|
+
tableConfigKey: string,
|
|
20
|
+
/** expandProp模式下 当用户对某一行展开或者关闭的时候会触发 */
|
|
21
|
+
privateExpandChange: Function,
|
|
22
|
+
/** 是否显示筛选图标 */
|
|
23
|
+
showFilter: boolean
|
|
24
|
+
}> = Symbol('tableKey')
|
|
@@ -24,6 +24,7 @@ import demo from './demo.vue'
|
|
|
24
24
|
| fixed | 单元格宽度是自适应还是固定 | boolean | - | false |
|
|
25
25
|
| estimatedRowHeight | 渲染动态的单元格的预估高度 | number \| null | - | null |
|
|
26
26
|
| headerHeight | Header 的高度由height设置。 如果传入数组,它会使 header row 等于数组长度 | number \| number[] \| null | - | null |
|
|
27
|
+
| cellWidthAdaptive | 单元格宽度自适应 | boolean | - | false |
|
|
27
28
|
| 其余参数 | 参考el官网的table | any | - | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E5%B1%9E%E6%80%A7 |
|
|
28
29
|
|
|
29
30
|
### 3) Events
|
|
@@ -43,13 +43,15 @@ const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo
|
|
|
43
43
|
const test = () => {
|
|
44
44
|
filtersValue.value = {}
|
|
45
45
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
46
|
+
for (let i = 0; i < 1000; i++) {
|
|
47
|
+
tableData.value.push({
|
|
48
|
+
id: i,
|
|
49
|
+
sn: 'sn' + i,
|
|
50
|
+
date: 'date' + i,
|
|
51
|
+
address: 'address' + i,
|
|
52
|
+
name: 'name' + i
|
|
53
|
+
})
|
|
54
|
+
}
|
|
53
55
|
</script>
|
|
54
56
|
|
|
55
57
|
<style lang="scss" scoped>
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
<el-auto-resizer>
|
|
15
15
|
<template #default="{ width }">
|
|
16
16
|
<el-table-v2
|
|
17
|
-
|
|
17
|
+
v-if="width"
|
|
18
|
+
:columns="props.cellWidthAdaptive ? getAdaptive(props.columns, width) : props.columns"
|
|
18
19
|
:data="props.data"
|
|
19
20
|
:width="width"
|
|
20
21
|
:height="props.height"
|
|
@@ -22,16 +23,24 @@
|
|
|
22
23
|
:estimatedRowHeight="estimatedRowHeight"
|
|
23
24
|
:headerHeight="headerHeight"
|
|
24
25
|
v-bind="$attrs"
|
|
25
|
-
|
|
26
|
+
>
|
|
27
|
+
<template
|
|
28
|
+
v-if="!slots.empty"
|
|
29
|
+
#empty
|
|
30
|
+
>
|
|
31
|
+
<img src="./../../../src/assets/empty.png" />
|
|
32
|
+
</template>
|
|
33
|
+
</el-table-v2>
|
|
26
34
|
</template>
|
|
27
35
|
</el-auto-resizer>
|
|
28
36
|
</div>
|
|
29
37
|
</template>
|
|
30
38
|
|
|
31
39
|
<script setup lang="ts">
|
|
32
|
-
import { ref, watch, computed } from 'vue'
|
|
40
|
+
import { ref, watch, computed, useSlots } from 'vue'
|
|
33
41
|
import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
|
|
34
42
|
import MTableColumnSet from './../../MTableColumnSet/src/MTableColumnSet.vue'
|
|
43
|
+
import checkType from 'packages/Tool/checkType/checkType'
|
|
35
44
|
|
|
36
45
|
interface FilterValue {
|
|
37
46
|
[key: string]: Array<string | number>
|
|
@@ -59,7 +68,9 @@ const props = withDefaults(defineProps<{
|
|
|
59
68
|
/** 渲染动态的单元格的预估高度 */
|
|
60
69
|
estimatedRowHeight?: number | null,
|
|
61
70
|
/** Header 的高度由height设置。 如果传入数组,它会使 header row 等于数组长度 */
|
|
62
|
-
headerHeight?: number | number[] | null
|
|
71
|
+
headerHeight?: number | number[] | null,
|
|
72
|
+
/** 单元格宽度自适应 */
|
|
73
|
+
cellWidthAdaptive?: boolean
|
|
63
74
|
}>(), {
|
|
64
75
|
size: 'default',
|
|
65
76
|
data: () => [],
|
|
@@ -71,9 +82,12 @@ const props = withDefaults(defineProps<{
|
|
|
71
82
|
tableConfigKey: '',
|
|
72
83
|
fixed: false,
|
|
73
84
|
estimatedRowHeight: null,
|
|
74
|
-
headerHeight: null
|
|
85
|
+
headerHeight: null,
|
|
86
|
+
cellWidthAdaptive: false
|
|
75
87
|
})
|
|
76
88
|
|
|
89
|
+
const slots = useSlots()
|
|
90
|
+
|
|
77
91
|
const sizeToHeight: { [key: string]: number } = {
|
|
78
92
|
small: 30,
|
|
79
93
|
default: 50,
|
|
@@ -128,6 +142,25 @@ const emit = defineEmits<{
|
|
|
128
142
|
|
|
129
143
|
const tableRef = ref<any>(null)
|
|
130
144
|
|
|
145
|
+
const getAdaptive = (columns: TableV2Title[], tableWidth: number | 100): TableV2Title[] => {
|
|
146
|
+
if (!columns.length) return []
|
|
147
|
+
|
|
148
|
+
// 格式化宽度(去除px)
|
|
149
|
+
const formatWidth = (data: number | string = 0): number => checkType(data).isNumber() ? data as number : Number((data as string).replace(/[^0-9]/g, ''))
|
|
150
|
+
|
|
151
|
+
// 总份数
|
|
152
|
+
const total = columns
|
|
153
|
+
.map(item => formatWidth(item.width))
|
|
154
|
+
.reduce((a, b) => a + b)
|
|
155
|
+
|
|
156
|
+
return columns.map(item => {
|
|
157
|
+
return {
|
|
158
|
+
...item,
|
|
159
|
+
width: formatWidth(item.width) / total * (tableWidth - 6)
|
|
160
|
+
}
|
|
161
|
+
})
|
|
162
|
+
}
|
|
163
|
+
|
|
131
164
|
defineExpose({
|
|
132
165
|
scrollTo: (param: { scrollLeft?: number, scrollTop?: number }) => tableRef.value?.scrollTo(param),
|
|
133
166
|
scrollToLeft: (scrollLeft: number) => tableRef.value?.scrollToLeft(scrollLeft),
|
|
@@ -159,6 +192,10 @@ defineExpose({
|
|
|
159
192
|
top: 20px;
|
|
160
193
|
}
|
|
161
194
|
}
|
|
195
|
+
|
|
196
|
+
.el-table-v2__empty img {
|
|
197
|
+
width: 8%
|
|
198
|
+
}
|
|
162
199
|
</style>
|
|
163
200
|
|
|
164
201
|
<style lang="scss">
|
|
@@ -170,6 +207,7 @@ defineExpose({
|
|
|
170
207
|
&[data-border="true"] {
|
|
171
208
|
.el-table-v2 {
|
|
172
209
|
border: 1px solid var(--el-table-border-color);
|
|
210
|
+
//box-sizing: border-box; //宽度问题涉及表格内虚拟计算,所有无法改变盒模型模式
|
|
173
211
|
|
|
174
212
|
.el-table-v2__header-cell, .el-table-v2__row-cell {
|
|
175
213
|
border-right: var(--el-table-border);
|
|
@@ -192,5 +230,11 @@ defineExpose({
|
|
|
192
230
|
&[data-size="large"] .el-table-v2__cell-text {
|
|
193
231
|
line-height: 65px;
|
|
194
232
|
}
|
|
233
|
+
|
|
234
|
+
.el-table-v2__empty {
|
|
235
|
+
display: flex;
|
|
236
|
+
align-items: center;
|
|
237
|
+
justify-content: center;
|
|
238
|
+
}
|
|
195
239
|
}
|
|
196
240
|
</style>
|
package/packages/index.ts
CHANGED
|
@@ -13,6 +13,7 @@ import { MSelectTablePlugin } from 'packages/MSelectTable'
|
|
|
13
13
|
import { MDialogPlugin } from 'packages/MDialog'
|
|
14
14
|
import { MSelectTableV1Plugin } from 'packages/MSelectTableV1'
|
|
15
15
|
import { MTableV2Plugin } from 'packages/MTableV2'
|
|
16
|
+
import { MTableSuperPlugin } from 'packages/MTableSuper'
|
|
16
17
|
|
|
17
18
|
import useTableConfig from 'packages/Hook/useTableConfig/useTableConfig'
|
|
18
19
|
import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
|
|
@@ -42,6 +43,7 @@ const BrPlugin: Plugin = {
|
|
|
42
43
|
MDialogPlugin.install?.(app)
|
|
43
44
|
MSelectTableV1Plugin.install?.(app)
|
|
44
45
|
MTableV2Plugin.install?.(app)
|
|
46
|
+
MTableSuperPlugin.install?.(app)
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
|
|
@@ -58,6 +60,7 @@ export * from './MSelectV2'
|
|
|
58
60
|
export * from './MDialog'
|
|
59
61
|
export * from './MSelectTableV1'
|
|
60
62
|
export * from './MTableV2'
|
|
63
|
+
export * from './MTableSuper'
|
|
61
64
|
|
|
62
65
|
export { useTableConfig }
|
|
63
66
|
export { useTableV2Config }
|
package/packages/list.json
CHANGED
|
@@ -35,6 +35,12 @@
|
|
|
35
35
|
"compDesc": "这是一个虚拟化表格组件",
|
|
36
36
|
"compClassName": "m-table-v2"
|
|
37
37
|
},
|
|
38
|
+
{
|
|
39
|
+
"compName": "MTableSuper",
|
|
40
|
+
"compZhName": "整合表格组件",
|
|
41
|
+
"compDesc": "这是一个整合表格组件",
|
|
42
|
+
"compClassName": "m-table-super"
|
|
43
|
+
},
|
|
38
44
|
{
|
|
39
45
|
"compName": "MTableColumn",
|
|
40
46
|
"compZhName": "表格列组件",
|
|
@@ -40,9 +40,9 @@ type OptionsKeys = `${string}Options` | `${string}Map`
|
|
|
40
40
|
/** 表头 */
|
|
41
41
|
interface TableTitle {
|
|
42
42
|
/** 显示的标题 */
|
|
43
|
-
label
|
|
43
|
+
label?: string,
|
|
44
44
|
/** 字段名称 对应列内容的字段名, 也可以使用 property属性 */
|
|
45
|
-
prop
|
|
45
|
+
prop?: string,
|
|
46
46
|
/** 对应列的宽度 */
|
|
47
47
|
width?: number | string,
|
|
48
48
|
/** 对应列的最小宽度, 对应列的最小宽度, 与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列 */
|
package/src/router.ts
CHANGED
|
@@ -35,6 +35,11 @@ const routes = [{
|
|
|
35
35
|
name: 'MTableV2',
|
|
36
36
|
path: '/components/MTableV2',
|
|
37
37
|
component: () => import('packages/MTableV2/docs/README.md')
|
|
38
|
+
}, {
|
|
39
|
+
title: '整合表格组件',
|
|
40
|
+
name: 'MTableSuper',
|
|
41
|
+
path: '/components/MTableSuper',
|
|
42
|
+
component: () => import('packages/MTableSuper/docs/README.md')
|
|
38
43
|
}, {
|
|
39
44
|
title: '表格列组件',
|
|
40
45
|
name: 'MTableColumn',
|
package/tags.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo":{"attributes":[],"description":"这是一个demo"},"m-dialog":{"attributes":["modelValue","width","insideHeight","minInsideHeight","maxInsideHeight","resize","draggable","insideClassName","resized","update:insideHeight","update:modelValue"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","switch"],"description":"这是一个MInline"},"m-input-number":{"attributes":["modelValue","placeholder","disabled","size","min","max","step","stepStrictly","thousandthPlace","noBorder","noSpacing","update:modelValue","change","focus","blur"],"description":"这是一个MInputNumber"},"m-option":{"attributes":[],"description":"这是一个MOption"},"m-select":{"attributes":["checkboxMode","multiple"],"description":"这是一个MSelect"},"m-select-table":{"attributes":["modelValue","name","placeholder","disabled","size","total","filterMethod","filterable","remote","remoteMethod","options","tableTitle","multiple","keywords","reserveSelection","tableHeight","isAffirmBtn","scrollbarAlwaysOn","allowCreate","border","popupWidth","selected","selectMultiple","toPage","update:modelValue","clear","removeTag"],"description":"这是一个MSelectTable"},"m-select-table-v1":{"attributes":["modelValue","placeholder","disabled","options","tableTitle","remoteMethod","allowCreate","focusShow","isSelect","clearable","size","labelKey","scrollbarAlwaysOn","total","update:modelValue","selectMultiple","change","selected","clear"],"description":"这是一个MSelectTableV1"},"m-select-v2":{"attributes":["modelValue","checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","expandProp","expandRowKeys","rowKey","tableConfigKey","pasteData","update:tableConfig","privateExpandChange"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","tableConfigKey","update:modelValue","change"],"description":"这是一个MTableColumnSet"},"m-table-v2":{"attributes":["size","data","height","border","columns","filtersValue","tableConfig","tableConfigKey","fixed","estimatedRowHeight","headerHeight","pasteData","update:tableConfig"],"description":"这是一个MTableV2"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}
|
|
1
|
+
{"demo":{"attributes":[],"description":"这是一个demo"},"m-dialog":{"attributes":["modelValue","width","insideHeight","minInsideHeight","maxInsideHeight","resize","draggable","insideClassName","resized","update:insideHeight","update:modelValue"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","switch"],"description":"这是一个MInline"},"m-input-number":{"attributes":["modelValue","placeholder","disabled","size","min","max","step","stepStrictly","thousandthPlace","noBorder","noSpacing","update:modelValue","change","focus","blur"],"description":"这是一个MInputNumber"},"m-option":{"attributes":[],"description":"这是一个MOption"},"m-select":{"attributes":["checkboxMode","multiple"],"description":"这是一个MSelect"},"m-select-table":{"attributes":["modelValue","name","placeholder","disabled","size","total","filterMethod","filterable","remote","remoteMethod","options","tableTitle","multiple","keywords","reserveSelection","tableHeight","isAffirmBtn","scrollbarAlwaysOn","allowCreate","border","popupWidth","selected","selectMultiple","toPage","update:modelValue","clear","removeTag"],"description":"这是一个MSelectTable"},"m-select-table-v1":{"attributes":["modelValue","placeholder","disabled","options","tableTitle","remoteMethod","allowCreate","focusShow","isSelect","clearable","size","labelKey","scrollbarAlwaysOn","total","update:modelValue","selectMultiple","change","selected","clear"],"description":"这是一个MSelectTableV1"},"m-select-v2":{"attributes":["modelValue","checkboxMode","multiple","showAll","options","update:modelValue"],"description":"这是一个MSelectV2"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","expandProp","expandRowKeys","rowKey","tableConfigKey","pasteData","update:tableConfig","privateExpandChange"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","update:filtersValue"],"description":"这是一个MTableColumn"},"m-table-column-set":{"attributes":["modelValue","foldMode","link","tableConfigKey","update:modelValue","change"],"description":"这是一个MTableColumnSet"},"m-table-super":{"attributes":[],"description":"这是一个MTableSuper"},"m-table-v2":{"attributes":["size","data","height","border","columns","filtersValue","tableConfig","tableConfigKey","fixed","estimatedRowHeight","headerHeight","cellWidthAdaptive","pasteData","update:tableConfig"],"description":"这是一个MTableV2"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}
|