更新到最新的代码,用户选择组件 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