更新到最新的代码,用户选择组件 JSelectUser ,选中后没有数据回传 #630
parent
9ecfffbd19
commit
557597390c
|
@ -140,6 +140,7 @@
|
|||
deleteSelectRowByKey,
|
||||
} = useCustomSelection(
|
||||
getProps,
|
||||
emit,
|
||||
wrapRef,
|
||||
getPaginationInfo,
|
||||
tableData,
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import type { BasicColumn } from '/@/components/Table';
|
||||
import type { Ref, ComputedRef } from 'vue';
|
||||
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 { throttle } from 'lodash-es';
|
||||
import { Checkbox } from 'ant-design-vue';
|
||||
|
@ -20,6 +20,7 @@ export const CUS_SEL_COLUMN_KEY = 'j-custom-selected-column';
|
|||
*/
|
||||
export function useCustomSelection(
|
||||
propsRef: ComputedRef<BasicTableProps>,
|
||||
emit: EmitType,
|
||||
wrapRef: Ref<null | HTMLDivElement>,
|
||||
getPaginationRef: ComputedRef<boolean | PaginationProps>,
|
||||
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);
|
||||
|
||||
let bodyResizeObserver: Nullable<ResizeObserver> = null;
|
||||
// 获取首行行高
|
||||
watchEffect(() => {
|
||||
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;
|
||||
if (el) {
|
||||
rowHeight.value = el.offsetHeight;
|
||||
|
@ -125,6 +143,9 @@ export function useCustomSelection(
|
|||
if (bodyEl.value) {
|
||||
bodyEl.value?.removeEventListener('scroll', onScrollTopChange);
|
||||
}
|
||||
if (bodyResizeObserver != null) {
|
||||
bodyResizeObserver.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
// 选择全部
|
||||
|
@ -237,6 +258,10 @@ export function useCustomSelection(
|
|||
}, 0);
|
||||
}
|
||||
}
|
||||
emit('selection-change', {
|
||||
keys: getSelectRowKeys(),
|
||||
rows: getSelectRows(),
|
||||
});
|
||||
}
|
||||
|
||||
// 用于判断是否是自定义选择列
|
||||
|
@ -317,6 +342,13 @@ export function useCustomSelection(
|
|||
onSelectAll(false);
|
||||
}
|
||||
|
||||
// 通过 selectedKeys 同步 selectedRows
|
||||
function syncSelectedRows() {
|
||||
if (selectedKeys.value.length !== selectedRows.value.length) {
|
||||
setSelectedRowKeys(selectedKeys.value);
|
||||
}
|
||||
}
|
||||
|
||||
// 设置选择的key
|
||||
function setSelectedRowKeys(rowKeys: string[]) {
|
||||
selectedKeys.value = rowKeys;
|
||||
|
@ -333,6 +365,7 @@ export function useCustomSelection(
|
|||
found && trueSelectedRows.push(found);
|
||||
});
|
||||
selectedRows.value = trueSelectedRows;
|
||||
emitChange();
|
||||
}
|
||||
|
||||
function getSelectRows<T = Recordable>() {
|
||||
|
|
Loading…
Reference in New Issue