更新到最新的代码,用户选择组件 JSelectUser ,选中后没有数据回传 #630

pull/663/head
zhangdaiscott 2023-07-12 16:52:44 +08:00
parent 9ecfffbd19
commit 557597390c
2 changed files with 36 additions and 2 deletions

View File

@ -140,6 +140,7 @@
deleteSelectRowByKey, deleteSelectRowByKey,
} = useCustomSelection( } = useCustomSelection(
getProps, getProps,
emit,
wrapRef, wrapRef,
getPaginationInfo, getPaginationInfo,
tableData, tableData,

View File

@ -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>() {