br-dionysus 1.18.2 → 1.18.4
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 +53 -42
- package/attributes.json +1 -1
- package/dist/br-dionysus.es.js +5286 -5263
- package/dist/br-dionysus.umd.js +6 -6
- package/dist/index.css +1 -1
- package/dist/packages/MTable/src/MTable.vue.d.ts +9 -0
- package/dist/packages/MTable/src/delegate.d.ts +8 -0
- package/dist/packages/Tool/checkType/checkType.d.ts +1 -0
- package/package.json +1 -1
- package/packages/MTable/docs/DemoTest1.vue +48 -7
- package/packages/MTable/docs/DemoTest2.vue +9 -15
- package/packages/MTable/docs/DemoTest8.vue +182 -0
- package/packages/MTable/docs/README.md +1 -0
- package/packages/MTable/docs/demo.vue +22 -18
- package/packages/MTable/src/MTable.vue +106 -80
- package/packages/MTable/src/delegate.ts +49 -0
- package/packages/MTable/src/token.ts +9 -9
- package/packages/MTableColumn/src/MTableColumn.vue +31 -77
- package/packages/Tool/checkType/README.md +6 -5
- package/packages/Tool/checkType/checkType.ts +6 -4
- package/tags.json +1 -1
- package/web-types.json +1 -1
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
:rowKey="props.rowKey"
|
|
15
15
|
:cellStyle="cellStyle"
|
|
16
16
|
:summaryMethod="props.circleTotal ? summaryMethodFun : props.summaryMethod"
|
|
17
|
+
:cellClassName="getCellClassName"
|
|
17
18
|
@paste="paste"
|
|
18
19
|
@cellClick="cellClick"
|
|
19
20
|
@expandChange="expandChange"
|
|
@@ -39,6 +40,7 @@ import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
|
|
|
39
40
|
import { tableKey } from './token'
|
|
40
41
|
import slotsToData, { SlotsToDataReturnItem } from './../../Tool/slotsToData/slotsToData'
|
|
41
42
|
import globalEvents from '../../Tool/globalEvents/globalEvents'
|
|
43
|
+
import { delegate } from './delegate'
|
|
42
44
|
|
|
43
45
|
interface FilterValue {
|
|
44
46
|
[key: string]: Array<string | number>;
|
|
@@ -68,6 +70,8 @@ const props = withDefaults(defineProps<{
|
|
|
68
70
|
summaryMethod?:((data: { columns: any[], data: any[] }) => string[]) | null;
|
|
69
71
|
/** 是否圈选合计 */
|
|
70
72
|
circleTotal?: boolean;
|
|
73
|
+
/** 是否启用圈选复制 */
|
|
74
|
+
isCircleCopy: boolean;
|
|
71
75
|
}>(), {
|
|
72
76
|
size: '',
|
|
73
77
|
sole: 'key',
|
|
@@ -81,7 +85,9 @@ const props = withDefaults(defineProps<{
|
|
|
81
85
|
selectionCell: '',
|
|
82
86
|
// showSummary: false,
|
|
83
87
|
summaryMethod: null,
|
|
84
|
-
circleTotal: true
|
|
88
|
+
circleTotal: true,
|
|
89
|
+
/** 是否启用圈选复制 */
|
|
90
|
+
isCircleCopy: true
|
|
85
91
|
})
|
|
86
92
|
|
|
87
93
|
const slots = useSlots()
|
|
@@ -276,16 +282,43 @@ const selectionArea: SelectionAreaType = reactive<SelectionAreaType>({
|
|
|
276
282
|
/** 圈选中 */
|
|
277
283
|
isInProgress: false
|
|
278
284
|
})
|
|
279
|
-
const
|
|
280
|
-
if (selectionArea.startX === null || selectionArea.startY === null || selectionArea.endX === null || selectionArea.endY === null)
|
|
285
|
+
const area = computed(() => {
|
|
286
|
+
if (selectionArea.startX === null || selectionArea.startY === null || selectionArea.endX === null || selectionArea.endY === null) {
|
|
287
|
+
return {
|
|
288
|
+
startX: -1,
|
|
289
|
+
startY: -1,
|
|
290
|
+
endX: -1,
|
|
291
|
+
endY: -1
|
|
292
|
+
}
|
|
293
|
+
}
|
|
281
294
|
const startX = selectionArea.startX > selectionArea.endX ? selectionArea.endX : selectionArea.startX
|
|
282
295
|
const startY = selectionArea.startY > selectionArea.endY ? selectionArea.endY : selectionArea.startY
|
|
283
296
|
const endX = selectionArea.startX > selectionArea.endX ? selectionArea.startX : selectionArea.endX
|
|
284
297
|
const endY = selectionArea.startY > selectionArea.endY ? selectionArea.startY : selectionArea.endY
|
|
285
|
-
if (data.columnIndex < startX || data.columnIndex > endX) return {}
|
|
286
|
-
if (data.rowIndex < startY || data.rowIndex > endY) return {}
|
|
287
298
|
return {
|
|
288
|
-
|
|
299
|
+
startX,
|
|
300
|
+
startY,
|
|
301
|
+
endX,
|
|
302
|
+
endY
|
|
303
|
+
}
|
|
304
|
+
})
|
|
305
|
+
const cellStyle = (data: { row: any, column: any, rowIndex: number, columnIndex: number }): Record<string, any> => {
|
|
306
|
+
if (selectionArea.startX === null || selectionArea.startY === null || selectionArea.endX === null || selectionArea.endY === null) return {}
|
|
307
|
+
if (data.columnIndex < area.value.startX || data.columnIndex > area.value.endX) return {}
|
|
308
|
+
if (data.rowIndex < area.value.startY || data.rowIndex > area.value.endY) return {}
|
|
309
|
+
|
|
310
|
+
const borderList: string[] = []
|
|
311
|
+
// 左边框
|
|
312
|
+
if (data.columnIndex === area.value.startX && data.rowIndex >= area.value.startY && data.rowIndex <= area.value.endY) borderList.push('inset 1px 0 0 0 var(--select-area-border-color)')
|
|
313
|
+
// 右边框
|
|
314
|
+
if (data.columnIndex === area.value.endX && data.rowIndex >= area.value.startY && data.rowIndex <= area.value.endY) borderList.push('inset -1px 0 0 0 var(--select-area-border-color)')
|
|
315
|
+
// 上边框
|
|
316
|
+
if (data.rowIndex === area.value.startY && data.columnIndex >= area.value.startX && data.columnIndex <= area.value.endX) borderList.push('inset 0 1px 0 0 var(--select-area-border-color)')
|
|
317
|
+
// 下边框
|
|
318
|
+
if (data.rowIndex === area.value.endY && data.columnIndex >= area.value.startX && data.columnIndex <= area.value.endX) borderList.push('inset 0 -1px 0 0 var(--select-area-border-color)')
|
|
319
|
+
return {
|
|
320
|
+
backgroundColor: 'var(--select-area-cell-color)',
|
|
321
|
+
boxShadow: borderList.join(',')
|
|
289
322
|
}
|
|
290
323
|
}
|
|
291
324
|
const cellMouseEnter = (row: any, column: any, cell: HTMLTableCellElement) => {
|
|
@@ -550,23 +583,39 @@ watch(
|
|
|
550
583
|
}
|
|
551
584
|
)
|
|
552
585
|
|
|
586
|
+
/**
|
|
587
|
+
* @description 遍历树
|
|
588
|
+
* @param {<T>[]} tree 树
|
|
589
|
+
* @param {Function} callback 回调函数
|
|
590
|
+
* */
|
|
591
|
+
const traverseTree = <T extends { children?: T[] }>(tree: T[], callback: (item: T) => void): void => {
|
|
592
|
+
tree.forEach(item => {
|
|
593
|
+
callback(item)
|
|
594
|
+
if (item.children) traverseTree(item.children ?? [], callback)
|
|
595
|
+
})
|
|
596
|
+
}
|
|
597
|
+
|
|
553
598
|
/** 表格单元格复制 */
|
|
554
599
|
const buildCopyText = (): string => {
|
|
555
600
|
if (selectionArea.startX === null || selectionArea.startY === null || selectionArea.endX === null || selectionArea.endY === null) return ''
|
|
556
|
-
const startX = selectionArea.startX < selectionArea.endX ? selectionArea.startX : selectionArea.endX
|
|
557
|
-
const startY = selectionArea.startY < selectionArea.endY ? selectionArea.startY : selectionArea.endY
|
|
558
|
-
const endX = selectionArea.startX > selectionArea.endX ? selectionArea.startX : selectionArea.endX
|
|
559
|
-
const endY = selectionArea.startY > selectionArea.endY ? selectionArea.startY : selectionArea.endY
|
|
560
601
|
const tableTitle = getTableTitle(true)
|
|
561
602
|
const copyColKey: (string | number | symbol)[] = []
|
|
562
|
-
for (let i = startX; i < endX + 1; i++) {
|
|
603
|
+
for (let i = area.value.startX; i < area.value.endX + 1; i++) {
|
|
563
604
|
copyColKey.push(tableTitle[i].prop)
|
|
564
605
|
}
|
|
606
|
+
// console.log('copyColKey', copyColKey)
|
|
607
|
+
|
|
608
|
+
const tableDataTreeMap: Record<string, any>[] = []
|
|
609
|
+
// 拍平表格树
|
|
610
|
+
traverseTree<Record<string, any>>(props.data, (item) => {
|
|
611
|
+
tableDataTreeMap.push(item)
|
|
612
|
+
})
|
|
613
|
+
|
|
565
614
|
const text: any[] = []
|
|
566
|
-
for (let i = startY; i <= endY; i++) {
|
|
615
|
+
for (let i = area.value.startY; i <= area.value.endY; i++) {
|
|
567
616
|
const row: any[] = []
|
|
568
617
|
copyColKey.forEach(key => {
|
|
569
|
-
row.push(
|
|
618
|
+
row.push(tableDataTreeMap[i][key as string])
|
|
570
619
|
})
|
|
571
620
|
text.push(row.join('\t'))
|
|
572
621
|
}
|
|
@@ -575,6 +624,7 @@ const buildCopyText = (): string => {
|
|
|
575
624
|
}
|
|
576
625
|
const onKeydown = async (e: KeyboardEvent) => {
|
|
577
626
|
if (!((e.ctrlKey || e.metaKey) && String(e.key).toLowerCase() === 'c')) return
|
|
627
|
+
if (!props.isCircleCopy) return
|
|
578
628
|
const text = buildCopyText()
|
|
579
629
|
if (!text) return
|
|
580
630
|
await copyTextToClipboard(text)
|
|
@@ -588,15 +638,55 @@ const onKeydown = async (e: KeyboardEvent) => {
|
|
|
588
638
|
}
|
|
589
639
|
})
|
|
590
640
|
}
|
|
641
|
+
|
|
642
|
+
const cellClassName = 'j-' + createHash()
|
|
643
|
+
const dataClassNameIdentity = 'br-m-table-identity'
|
|
644
|
+
const getCellClassName = (data: { row: any, column: Record<string, any>, rowIndex: number, columnIndex: number }): string => {
|
|
645
|
+
const classNameList: string[] = []
|
|
646
|
+
if (props.isCircleCopy) classNameList.push('s-my-table-column-text-fill')
|
|
647
|
+
classNameList.push(`${dataClassNameIdentity}-x-${data.columnIndex}`)
|
|
648
|
+
classNameList.push(`${dataClassNameIdentity}-y-${data.rowIndex}`)
|
|
649
|
+
classNameList.push(cellClassName)
|
|
650
|
+
|
|
651
|
+
// if (selectionArea.startX !== null && selectionArea.startY !== null && selectionArea.endX !== null && selectionArea.endY !== null) {
|
|
652
|
+
// // 左边框
|
|
653
|
+
// if (data.columnIndex === (area.value.startX) && data.rowIndex >= area.value.startY && data.rowIndex <= area.value.endY) classNameList.push('s-my-table-cell-left')
|
|
654
|
+
// // 右边框
|
|
655
|
+
// if (data.columnIndex === area.value.endX && data.rowIndex >= area.value.startY && data.rowIndex <= area.value.endY) classNameList.push('s-my-table-cell-right')
|
|
656
|
+
// // 上边框
|
|
657
|
+
// if (data.rowIndex === area.value.startY && data.columnIndex >= area.value.startX && data.columnIndex <= area.value.endX) classNameList.push('s-my-table-cell-top')
|
|
658
|
+
// // 下边框
|
|
659
|
+
// if (data.rowIndex === area.value.endY && data.columnIndex >= area.value.startX && data.columnIndex <= area.value.endX) classNameList.push('s-my-table-cell-bottom')
|
|
660
|
+
// }
|
|
661
|
+
|
|
662
|
+
return classNameList.join(' ')
|
|
663
|
+
}
|
|
664
|
+
delegate('#app', 'mousedown', '.' + cellClassName, (event: Event, dom: HTMLElement) => {
|
|
665
|
+
const xDataClass = dom.className.split(' ').find(item => item.indexOf(`${dataClassNameIdentity}-x-`) === 0) ?? ''
|
|
666
|
+
const yDataClass = dom.className.split(' ').find(item => item.indexOf(`${dataClassNameIdentity}-y-`) === 0) ?? ''
|
|
667
|
+
|
|
668
|
+
const xDataStr = xDataClass.split('-')[xDataClass.split('-').length - 1] ?? ''
|
|
669
|
+
const yDataStr = yDataClass.split('-')[yDataClass.split('-').length - 1] ?? ''
|
|
670
|
+
selectionArea.isInProgress = true
|
|
671
|
+
selectionArea.startX = xDataStr ? Number(xDataStr) : null
|
|
672
|
+
selectionArea.startY = yDataStr ? Number(yDataStr) : null
|
|
673
|
+
selectionArea.endX = null
|
|
674
|
+
selectionArea.endY = null
|
|
675
|
+
event.stopPropagation()
|
|
676
|
+
})
|
|
591
677
|
</script>
|
|
592
678
|
|
|
593
679
|
<style scoped lang="scss">
|
|
594
680
|
.br-m-table-box {
|
|
595
681
|
position: relative;
|
|
682
|
+
|
|
683
|
+
--select-area-cell-color: var(--el-color-primary-light-9);
|
|
684
|
+
--select-area-border-color: var(--el-color-primary);
|
|
685
|
+
--select-area-border: 1px solid var(--select-area-border-color);
|
|
596
686
|
}
|
|
597
687
|
|
|
598
688
|
.el-table__empty-text img {
|
|
599
|
-
width: 15
|
|
689
|
+
width: 15%;
|
|
600
690
|
}
|
|
601
691
|
</style>
|
|
602
692
|
|
|
@@ -611,73 +701,9 @@ const onKeydown = async (e: KeyboardEvent) => {
|
|
|
611
701
|
display: none;
|
|
612
702
|
}
|
|
613
703
|
}
|
|
614
|
-
}
|
|
615
|
-
|
|
616
|
-
.br-m-table-box {
|
|
617
|
-
.el-table__body-wrapper {
|
|
618
|
-
.el-table__cell {
|
|
619
|
-
padding-top: 0;
|
|
620
|
-
padding-bottom: 0;
|
|
621
|
-
|
|
622
|
-
.u-my-table-column-text {
|
|
623
|
-
padding-top: 10px;
|
|
624
|
-
padding-bottom: 10px;
|
|
625
|
-
}
|
|
626
|
-
}
|
|
627
|
-
|
|
628
|
-
.cell {
|
|
629
|
-
padding-left: 0;
|
|
630
|
-
padding-right: 0;
|
|
631
|
-
|
|
632
|
-
.u-my-table-column-text {
|
|
633
|
-
padding-left: 12px;
|
|
634
|
-
padding-right: 12px;
|
|
635
|
-
}
|
|
636
|
-
}
|
|
637
|
-
}
|
|
638
|
-
|
|
639
|
-
.el-table--small .el-table__body-wrapper {
|
|
640
|
-
.el-table__cell {
|
|
641
|
-
padding-top: 0;
|
|
642
|
-
padding-bottom: 0;
|
|
643
|
-
|
|
644
|
-
.u-my-table-column-text {
|
|
645
|
-
padding-top: 6px;
|
|
646
|
-
padding-bottom: 5px;
|
|
647
|
-
}
|
|
648
|
-
}
|
|
649
704
|
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
padding-right: 0;
|
|
653
|
-
|
|
654
|
-
.u-my-table-column-text {
|
|
655
|
-
padding-left: 8px;
|
|
656
|
-
padding-right: 8px;
|
|
657
|
-
}
|
|
658
|
-
}
|
|
659
|
-
}
|
|
660
|
-
|
|
661
|
-
.el-table--large .el-table__body-wrapper {
|
|
662
|
-
.el-table__cell {
|
|
663
|
-
padding-top: 0;
|
|
664
|
-
padding-bottom: 0;
|
|
665
|
-
|
|
666
|
-
.u-my-table-column-text {
|
|
667
|
-
padding-top: 15px;
|
|
668
|
-
padding-bottom: 14px;
|
|
669
|
-
}
|
|
670
|
-
}
|
|
671
|
-
|
|
672
|
-
.cell {
|
|
673
|
-
padding-left: 0;
|
|
674
|
-
padding-right: 0;
|
|
675
|
-
|
|
676
|
-
.u-my-table-column-text {
|
|
677
|
-
padding-left: 16px;
|
|
678
|
-
padding-right: 16px;
|
|
679
|
-
}
|
|
680
|
-
}
|
|
705
|
+
.s-my-table-column-text-fill {
|
|
706
|
+
user-select: none;
|
|
681
707
|
}
|
|
682
708
|
}
|
|
683
709
|
</style>
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 简单版事件代理函数
|
|
3
|
+
* @param parentSelector - 父元素选择器
|
|
4
|
+
* @param eventType - 事件类型,如 'click'、'mousedown' 等
|
|
5
|
+
* @param childSelector - 要代理的子元素选择器
|
|
6
|
+
* @param handler - 事件处理函数,this 指向匹配的子元素
|
|
7
|
+
*/
|
|
8
|
+
export const delegate = (
|
|
9
|
+
parentSelector: string,
|
|
10
|
+
eventType: string,
|
|
11
|
+
childSelector: string,
|
|
12
|
+
handler: (event: Event, matchedElement: HTMLElement) => void
|
|
13
|
+
): void => {
|
|
14
|
+
const parentElement = document.querySelector(parentSelector) as HTMLElement
|
|
15
|
+
|
|
16
|
+
if (!parentElement) {
|
|
17
|
+
console.warn(`未找到元素: ${parentSelector}`)
|
|
18
|
+
return
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
parentElement.addEventListener(eventType, (event: Event): void => {
|
|
22
|
+
const target = event.target as HTMLElement
|
|
23
|
+
const closestElement = target.closest(childSelector)
|
|
24
|
+
|
|
25
|
+
let currentElement = event.target as HTMLElement
|
|
26
|
+
let matchedElement: HTMLElement | null = null
|
|
27
|
+
|
|
28
|
+
while (currentElement && currentElement !== parentElement.parentElement && !currentElement.matches(childSelector)) {
|
|
29
|
+
if (currentElement.matches(childSelector)) {
|
|
30
|
+
matchedElement = currentElement
|
|
31
|
+
break
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
if (currentElement === parentElement) {
|
|
35
|
+
break
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
currentElement = currentElement.parentElement as HTMLElement
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
if (!matchedElement) {
|
|
42
|
+
matchedElement = (event.target as HTMLElement).closest(childSelector)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (closestElement && parentElement.contains(closestElement)) {
|
|
46
|
+
handler(event, matchedElement as HTMLElement)
|
|
47
|
+
}
|
|
48
|
+
})
|
|
49
|
+
}
|
|
@@ -4,23 +4,23 @@ import { TableConfig } from './../../Hook/useTableConfig/useTableConfig'
|
|
|
4
4
|
|
|
5
5
|
export const tableKey: InjectionKey<{
|
|
6
6
|
/** 表格列配置 */
|
|
7
|
-
tableConfig: Ref<TableConfig
|
|
7
|
+
tableConfig: Ref<TableConfig>;
|
|
8
8
|
/** 最后一列 */
|
|
9
|
-
lastColumnProp: Ref<string
|
|
9
|
+
lastColumnProp: Ref<string>;
|
|
10
10
|
/** 展开图标列 */
|
|
11
|
-
expandProp: string
|
|
11
|
+
expandProp: string;
|
|
12
12
|
/** 表格数据 */
|
|
13
|
-
tableData: Ref<any[]
|
|
13
|
+
tableData: Ref<any[]>;
|
|
14
14
|
/** 展开列 */
|
|
15
|
-
expandRowKeys: Ref<any[] | null
|
|
15
|
+
expandRowKeys: Ref<any[] | null>;
|
|
16
16
|
/** 行数据的 Key */
|
|
17
|
-
rowKey: Function | string
|
|
17
|
+
rowKey: Function | string;
|
|
18
18
|
/** 表格配置key */
|
|
19
19
|
tableConfigKey: string,
|
|
20
20
|
/** expandProp模式下 当用户对某一行展开或者关闭的时候会触发 */
|
|
21
|
-
privateExpandChange: Function
|
|
21
|
+
privateExpandChange: Function;
|
|
22
22
|
/** 是否显示筛选图标 */
|
|
23
|
-
showFilter: boolean
|
|
23
|
+
showFilter: boolean;
|
|
24
24
|
/** 选中区域 */
|
|
25
25
|
selectionArea: {
|
|
26
26
|
/** 开始x */
|
|
@@ -33,5 +33,5 @@ export const tableKey: InjectionKey<{
|
|
|
33
33
|
endY: number | null;
|
|
34
34
|
/** 圈选中 */
|
|
35
35
|
isInProgress: boolean;
|
|
36
|
-
}
|
|
36
|
+
};
|
|
37
37
|
}> = Symbol('tableKey')
|
|
@@ -3,10 +3,19 @@
|
|
|
3
3
|
v-bind="attrs"
|
|
4
4
|
:filterMethod="props.filterMethod"
|
|
5
5
|
>
|
|
6
|
+
<!--展开行开始-->
|
|
6
7
|
<template
|
|
7
8
|
#default="scope"
|
|
8
|
-
v-if="slots.default"
|
|
9
|
+
v-if="slots.default && expandProp"
|
|
9
10
|
>
|
|
11
|
+
<el-icon
|
|
12
|
+
class="u-my-table-column-icon"
|
|
13
|
+
v-if="isExpandTarget"
|
|
14
|
+
:data-active="getExpandActive(scope.$index)"
|
|
15
|
+
@click="expandRow(scope.$index)"
|
|
16
|
+
>
|
|
17
|
+
<ArrowRight />
|
|
18
|
+
</el-icon>
|
|
10
19
|
<slot
|
|
11
20
|
name="default"
|
|
12
21
|
v-bind="{
|
|
@@ -15,63 +24,19 @@
|
|
|
15
24
|
}"
|
|
16
25
|
></slot>
|
|
17
26
|
</template>
|
|
18
|
-
<template
|
|
19
|
-
#default="scope"
|
|
20
|
-
v-if="!slots.default"
|
|
21
|
-
>
|
|
22
|
-
<div
|
|
23
|
-
class="u-my-table-column-text"
|
|
24
|
-
@mousedown="mousedown($event, scope.cellIndex, scope.$index)"
|
|
25
|
-
>
|
|
26
|
-
{{ columnData[scope.$index] }}
|
|
27
|
-
<slot
|
|
28
|
-
name="default"
|
|
29
|
-
v-bind="{
|
|
30
|
-
index: scope.$index,
|
|
31
|
-
...scope
|
|
32
|
-
}"
|
|
33
|
-
></slot>
|
|
34
|
-
</div>
|
|
35
|
-
</template>
|
|
36
|
-
|
|
37
|
-
<!--展开行开始-->
|
|
38
|
-
<template
|
|
39
|
-
#default="scope"
|
|
40
|
-
v-if="slots.default && expandProp"
|
|
41
|
-
>
|
|
42
|
-
<div class="u-my-table-column-gp">
|
|
43
|
-
<el-icon
|
|
44
|
-
class="u-my-table-column-icon"
|
|
45
|
-
v-if="isExpandTarget"
|
|
46
|
-
:data-active="getExpandActive(scope.$index)"
|
|
47
|
-
@click="expandRow(scope.$index)"
|
|
48
|
-
>
|
|
49
|
-
<ArrowRight />
|
|
50
|
-
</el-icon>
|
|
51
|
-
<slot
|
|
52
|
-
name="default"
|
|
53
|
-
v-bind="{
|
|
54
|
-
index: scope.$index,
|
|
55
|
-
...scope
|
|
56
|
-
}"
|
|
57
|
-
></slot>
|
|
58
|
-
</div>
|
|
59
|
-
</template>
|
|
60
27
|
<template
|
|
61
28
|
#default="scope"
|
|
62
29
|
v-else-if="!slots.default && expandProp"
|
|
63
30
|
>
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<span>{{ columnData[scope.$index] }}</span>
|
|
74
|
-
</div>
|
|
31
|
+
<el-icon
|
|
32
|
+
class="u-my-table-column-icon"
|
|
33
|
+
v-if="isExpandTarget"
|
|
34
|
+
:data-active="getExpandActive(scope.$index)"
|
|
35
|
+
@click="expandRow(scope.$index)"
|
|
36
|
+
>
|
|
37
|
+
<ArrowRight />
|
|
38
|
+
</el-icon>
|
|
39
|
+
<span>{{ columnData[scope.$index] }}</span>
|
|
75
40
|
</template>
|
|
76
41
|
<!--展开行结束-->
|
|
77
42
|
|
|
@@ -210,7 +175,7 @@ import { ref, useSlots, useAttrs, inject, computed } from 'vue'
|
|
|
210
175
|
import checkType from '../../Tool/checkType/checkType'
|
|
211
176
|
import { tableKey } from './../../MTable/src/token'
|
|
212
177
|
import { useZIndex } from 'element-plus'
|
|
213
|
-
import
|
|
178
|
+
import MTableColumn from './../src/MTableColumn.vue'
|
|
214
179
|
import { ArrowRight } from '@element-plus/icons-vue'
|
|
215
180
|
|
|
216
181
|
interface FilterValue {
|
|
@@ -380,17 +345,6 @@ const boxStyle = ref<BoxStyle>({
|
|
|
380
345
|
right: 'unset',
|
|
381
346
|
zIndex: thisZIndex
|
|
382
347
|
})
|
|
383
|
-
|
|
384
|
-
// 选中区域
|
|
385
|
-
const selectionArea = tableKeyData?.selectionArea ?? { startX: null, startY: null, endX: null, endY: null, isInProgress: false }
|
|
386
|
-
const mousedown = (event: Event, x: number, y: number) => {
|
|
387
|
-
selectionArea.isInProgress = true
|
|
388
|
-
selectionArea.startX = x
|
|
389
|
-
selectionArea.startY = y
|
|
390
|
-
selectionArea.endX = null
|
|
391
|
-
selectionArea.endY = null
|
|
392
|
-
event.stopPropagation()
|
|
393
|
-
}
|
|
394
348
|
</script>
|
|
395
349
|
|
|
396
350
|
<style scoped lang="scss">
|
|
@@ -414,9 +368,9 @@ const mousedown = (event: Event, x: number, y: number) => {
|
|
|
414
368
|
float: right;
|
|
415
369
|
}
|
|
416
370
|
|
|
417
|
-
|
|
418
|
-
display: inline;
|
|
419
|
-
}
|
|
371
|
+
//.u-my-table-column-gp {
|
|
372
|
+
// display: inline;
|
|
373
|
+
//}
|
|
420
374
|
|
|
421
375
|
.u-my-table-column-icon {
|
|
422
376
|
float: left;
|
|
@@ -430,14 +384,14 @@ const mousedown = (event: Event, x: number, y: number) => {
|
|
|
430
384
|
}
|
|
431
385
|
}
|
|
432
386
|
|
|
433
|
-
|
|
434
|
-
overflow: hidden;
|
|
435
|
-
display: block;
|
|
436
|
-
overflow-wrap: break-word;
|
|
437
|
-
text-overflow: ellipsis;
|
|
438
|
-
white-space: nowrap;
|
|
439
|
-
user-select: none;
|
|
440
|
-
}
|
|
387
|
+
//.u-my-table-column-text {
|
|
388
|
+
// overflow: hidden;
|
|
389
|
+
// display: block;
|
|
390
|
+
// overflow-wrap: break-word;
|
|
391
|
+
// text-overflow: ellipsis;
|
|
392
|
+
// white-space: nowrap;
|
|
393
|
+
// user-select: none;
|
|
394
|
+
//}
|
|
441
395
|
</style>
|
|
442
396
|
|
|
443
397
|
<style lang="scss">
|
|
@@ -8,10 +8,11 @@
|
|
|
8
8
|
|
|
9
9
|
### 2) 返参
|
|
10
10
|
|
|
11
|
-
| 参数 | 描述
|
|
12
|
-
|
|
13
|
-
| isNumber | 是否为数值
|
|
14
|
-
| isObject | 是否为对象
|
|
15
|
-
| isArray | 是否为数组
|
|
11
|
+
| 参数 | 描述 | 类型 | 默认值 |
|
|
12
|
+
|----------|--------|---------------|-----|
|
|
13
|
+
| isNumber | 是否为数值 | () => boolean | - |
|
|
14
|
+
| isObject | 是否为对象 | () => boolean | - |
|
|
15
|
+
| isArray | 是否为数组 | () => boolean | - |
|
|
16
|
+
| isString | 是否为字符串 | () => boolean | - |
|
|
16
17
|
|
|
17
18
|
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
/** 检查变量类型 */
|
|
2
2
|
const checkType = (data: any): {
|
|
3
|
-
isNumber: () => boolean
|
|
4
|
-
isObject: () => boolean
|
|
5
|
-
isArray: () => boolean
|
|
3
|
+
isNumber: () => boolean;
|
|
4
|
+
isObject: () => boolean;
|
|
5
|
+
isArray: () => boolean;
|
|
6
|
+
isString: () => boolean;
|
|
6
7
|
} => {
|
|
7
8
|
return {
|
|
8
9
|
isNumber: (): boolean => typeof data === 'number',
|
|
9
10
|
isObject: (): boolean => typeof data === 'object' && data !== null && !Array.isArray(data),
|
|
10
|
-
isArray: (): boolean => Array.isArray(data)
|
|
11
|
+
isArray: (): boolean => Array.isArray(data),
|
|
12
|
+
isString: (): boolean => typeof data === 'string'
|
|
11
13
|
}
|
|
12
14
|
}
|
|
13
15
|
|
package/tags.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo":{"attributes":[],"description":"这是一个demo"},"m-dialog":{"attributes":["modelValue","width","insideHeight","minInsideHeight","maxInsideHeight","resize","draggable","insideClassName","drawerMode","resized","update:insideHeight","update:modelValue"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","configKey","model","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","modelValue","update:modelValue","change"],"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","update:modelValue","selected","selectMultiple","toPage","selectChange","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-batch-edit":{"attributes":["selectionCell","size","tableData","tableTitle","relevancyTable","update:tableData"],"description":"这是一个MBatchEdit"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","expandProp","expandRowKeys","rowKey","tableConfigKey","selectionCell","summaryMethod","circleTotal","pasteData","update:tableConfig","privateExpandChange","update:selectionCell","copyData"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","isBatchEdit","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","expandColumnKey","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","drawerMode","resized","update:insideHeight","update:modelValue"],"description":"这是一个MDialog"},"m-inline":{"attributes":["minWidth","maxWidth","size","configKey","model","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","modelValue","update:modelValue","change"],"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","update:modelValue","selected","selectMultiple","toPage","selectChange","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-batch-edit":{"attributes":["selectionCell","size","tableData","tableTitle","relevancyTable","update:tableData"],"description":"这是一个MBatchEdit"},"m-table":{"attributes":["size","sole","data","filtersValue","tableConfig","expandProp","expandRowKeys","rowKey","tableConfigKey","selectionCell","summaryMethod","circleTotal","isCircleCopy","pasteData","update:tableConfig","privateExpandChange","update:selectionCell","copyData"],"description":"这是一个MTable"},"m-table-column":{"attributes":["filtersValue","filters","filterMethod","children","isBatchEdit","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","expandColumnKey","pasteData","update:tableConfig"],"description":"这是一个MTableV2"},"skin-config":{"attributes":["change"],"description":"这是一个SkinConfig"},"tab-page":{"attributes":["modelValue","activeKey","showRightClickMenu","primaryColor","primaryBackgroundColor","close","click"],"description":"这是一个TabPage"}}
|