更新到最新的代码,用户选择组件 JSelectUser ,选中后没有数据回传 #630
							parent
							
								
									9ecfffbd19
								
							
						
					
					
						commit
						557597390c
					
				|  | @ -140,6 +140,7 @@ | ||||||
|         deleteSelectRowByKey, |         deleteSelectRowByKey, | ||||||
|       } = useCustomSelection( |       } = useCustomSelection( | ||||||
|         getProps, |         getProps, | ||||||
|  |         emit, | ||||||
|         wrapRef, |         wrapRef, | ||||||
|         getPaginationInfo, |         getPaginationInfo, | ||||||
|         tableData, |         tableData, | ||||||
|  |  | ||||||
|  | @ -1,7 +1,7 @@ | ||||||
| import type { BasicColumn } from '/@/components/Table'; | import type { BasicColumn } from '/@/components/Table'; | ||||||
| import type { Ref, ComputedRef } from 'vue'; | import type { Ref, ComputedRef } from 'vue'; | ||||||
| import type { BasicTableProps, PaginationProps, TableRowSelection } from '/@/components/Table'; | import type { BasicTableProps, PaginationProps, TableRowSelection } from '/@/components/Table'; | ||||||
| import { computed, onUnmounted, ref, toRaw, unref, watchEffect } from 'vue'; | import { computed, nextTick, onUnmounted, ref, toRaw, unref, watch, watchEffect } from 'vue'; | ||||||
| import { omit } from 'lodash-es'; | import { omit } from 'lodash-es'; | ||||||
| import { throttle } from 'lodash-es'; | import { throttle } from 'lodash-es'; | ||||||
| import { Checkbox } from 'ant-design-vue'; | import { Checkbox } from 'ant-design-vue'; | ||||||
|  | @ -20,6 +20,7 @@ export const CUS_SEL_COLUMN_KEY = 'j-custom-selected-column'; | ||||||
|  */ |  */ | ||||||
| export function useCustomSelection( | export function useCustomSelection( | ||||||
|   propsRef: ComputedRef<BasicTableProps>, |   propsRef: ComputedRef<BasicTableProps>, | ||||||
|  |   emit: EmitType, | ||||||
|   wrapRef: Ref<null | HTMLDivElement>, |   wrapRef: Ref<null | HTMLDivElement>, | ||||||
|   getPaginationRef: ComputedRef<boolean | PaginationProps>, |   getPaginationRef: ComputedRef<boolean | PaginationProps>, | ||||||
|   tableData: Ref<Recordable[]>, |   tableData: Ref<Recordable[]>, | ||||||
|  | @ -99,13 +100,30 @@ export function useCustomSelection( | ||||||
|     }; |     }; | ||||||
|   }); |   }); | ||||||
| 
 | 
 | ||||||
|  |   // 当任意一个变化时,触发同步检测
 | ||||||
|  |   watch([selectedKeys, selectedRows], () => { | ||||||
|  |     nextTick(() => { | ||||||
|  |       syncSelectedRows(); | ||||||
|  |     }); | ||||||
|  |   }); | ||||||
|  | 
 | ||||||
|   // 监听滚动条事件
 |   // 监听滚动条事件
 | ||||||
|   const onScrollTopChange = throttle((e) => (scrollTop.value = e?.target?.scrollTop), 150); |   const onScrollTopChange = throttle((e) => (scrollTop.value = e?.target?.scrollTop), 150); | ||||||
| 
 | 
 | ||||||
|  |   let bodyResizeObserver: Nullable<ResizeObserver> = null; | ||||||
|   // 获取首行行高
 |   // 获取首行行高
 | ||||||
|   watchEffect(() => { |   watchEffect(() => { | ||||||
|     if (bodyEl.value) { |     if (bodyEl.value) { | ||||||
|       bodyHeight.value = bodyEl.value.offsetHeight; |       // 监听div高度变化
 | ||||||
|  |       bodyResizeObserver = new ResizeObserver((entries) => { | ||||||
|  |         for (let entry of entries) { | ||||||
|  |           if (entry.target === bodyEl.value && entry.contentRect) { | ||||||
|  |             const { height } = entry.contentRect; | ||||||
|  |             bodyHeight.value = Math.ceil(height); | ||||||
|  |           } | ||||||
|  |         } | ||||||
|  |       }); | ||||||
|  |       bodyResizeObserver.observe(bodyEl.value); | ||||||
|       const el = bodyEl.value?.querySelector('tbody.ant-table-tbody tr.ant-table-row') as HTMLDivElement; |       const el = bodyEl.value?.querySelector('tbody.ant-table-tbody tr.ant-table-row') as HTMLDivElement; | ||||||
|       if (el) { |       if (el) { | ||||||
|         rowHeight.value = el.offsetHeight; |         rowHeight.value = el.offsetHeight; | ||||||
|  | @ -125,6 +143,9 @@ export function useCustomSelection( | ||||||
|     if (bodyEl.value) { |     if (bodyEl.value) { | ||||||
|       bodyEl.value?.removeEventListener('scroll', onScrollTopChange); |       bodyEl.value?.removeEventListener('scroll', onScrollTopChange); | ||||||
|     } |     } | ||||||
|  |     if (bodyResizeObserver != null) { | ||||||
|  |       bodyResizeObserver.disconnect(); | ||||||
|  |     } | ||||||
|   }); |   }); | ||||||
| 
 | 
 | ||||||
|   // 选择全部
 |   // 选择全部
 | ||||||
|  | @ -237,6 +258,10 @@ export function useCustomSelection( | ||||||
|         }, 0); |         }, 0); | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|  |     emit('selection-change', { | ||||||
|  |       keys: getSelectRowKeys(), | ||||||
|  |       rows: getSelectRows(), | ||||||
|  |     }); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   // 用于判断是否是自定义选择列
 |   // 用于判断是否是自定义选择列
 | ||||||
|  | @ -317,6 +342,13 @@ export function useCustomSelection( | ||||||
|     onSelectAll(false); |     onSelectAll(false); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|  |   // 通过 selectedKeys 同步 selectedRows
 | ||||||
|  |   function syncSelectedRows() { | ||||||
|  |     if (selectedKeys.value.length !== selectedRows.value.length) { | ||||||
|  |       setSelectedRowKeys(selectedKeys.value); | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|   // 设置选择的key
 |   // 设置选择的key
 | ||||||
|   function setSelectedRowKeys(rowKeys: string[]) { |   function setSelectedRowKeys(rowKeys: string[]) { | ||||||
|     selectedKeys.value = rowKeys; |     selectedKeys.value = rowKeys; | ||||||
|  | @ -333,6 +365,7 @@ export function useCustomSelection( | ||||||
|       found && trueSelectedRows.push(found); |       found && trueSelectedRows.push(found); | ||||||
|     }); |     }); | ||||||
|     selectedRows.value = trueSelectedRows; |     selectedRows.value = trueSelectedRows; | ||||||
|  |     emitChange(); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   function getSelectRows<T = Recordable>() { |   function getSelectRows<T = Recordable>() { | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	 zhangdaiscott
						zhangdaiscott