diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue index 1cc26f6e..4da3e72c 100644 --- a/src/components/CardBox/index.vue +++ b/src/components/CardBox/index.vue @@ -54,31 +54,24 @@ delete: item.key === 'delete', }" > + - - + @@ -291,10 +284,10 @@ const handleClick = () => { display: flex; flex-grow: 1; - > span, - & button { - width: 100%; - border-radius: 0; + & > span, + button { + width: 100% !important; + border-radius: 0 !important; } button { @@ -372,9 +365,9 @@ const handleClick = () => { } } - :deep(.ant-tooltip-disabled-compatible-wrapper) { - width: 100%; - } + // :deep(.ant-tooltip-disabled-compatible-wrapper) { + // width: 100%; + // } } } } diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index 38e2e6af..915657c7 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -50,11 +50,20 @@ export interface JTableProps extends TableProps{ pageIndex: number; }; model?: keyof typeof ModelEnum | undefined; // 显示table还是card - actions?: ActionsType[]; + // actions?: ActionsType[]; noPagination?: boolean; rowSelection?: TableProps['rowSelection']; cardProps?: Record; dataSource?: Record[]; + gridColumn: number; + /** + * 用于不同分辨率 + * gridColumns[0] 1366 ~ 1440 分辨率; + * gridColumns[1] 1440 ~ 1600 分辨率; + * gridColumns[2] > 1600 分辨率; + */ + gridColumns?: number[]; + alertRender?: boolean; } const JTable = defineComponent({ @@ -87,10 +96,10 @@ const JTable = defineComponent({ type: [String, undefined], default: undefined }, - actions: { - type: Array as PropType, - default: () => [] - }, + // actions: { + // type: Array as PropType, + // default: () => [] + // }, noPagination: { type: Boolean, default: false @@ -106,12 +115,24 @@ const JTable = defineComponent({ dataSource: { type: Array, default: () => [] + }, + gridColumns: { + type: Array as PropType, + default: [2, 3, 4] + }, + gridColumn: { + type: Number, + default: 4 + }, + alertRender: { + type: Boolean, + default: true } } as any, setup(props: JTableProps ,{ slots, emit }){ const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE const _model = ref(props.model ? props.model : ModelEnum.CARD); // 模式切换 - const column = ref(4); + const column = ref(props.gridColumn || 4); const _dataSource = ref[]>([]) const pageIndex = ref(0) const pageSize = ref(6) @@ -119,9 +140,20 @@ const JTable = defineComponent({ const _columns = ref(props?.columns || []) const loading = ref(true) - // alert关闭,取消选择 - const handleAlertClose = () => { - emit('cancelSelect') + /** + * 监听宽度,计算显示卡片个数 + */ + const windowChange = () => { + if (window.innerWidth <= 1440) { + const _column = props.gridColumn && props.gridColumn < 2 ? props.gridColumn : 2; + column.value = props.gridColumns ? props.gridColumns[0] : _column + } else if (window.innerWidth > 1440 && window.innerWidth <= 1600) { + const _column = props.gridColumn && props.gridColumn < 3 ? props.gridColumn : 3; + column.value = props.gridColumns ? props.gridColumns[1] : _column + } else if (window.innerWidth > 1600) { + const _column = props.gridColumn && props.gridColumn < 4 ? props.gridColumn : 4; + column.value = props.gridColumns ? props.gridColumns[2] : _column + } } /** @@ -153,13 +185,22 @@ const JTable = defineComponent({ } else { _dataSource.value = props?.dataSource || [] } - loading.value = false } watchEffect(() => { handleSearch(props.params) }) + + onMounted(() => { + window.onresize = () => { + windowChange() + } + }) + + onUnmounted(() => { + window.onresize = null + }) return () =>
@@ -184,12 +225,14 @@ const JTable = defineComponent({ {/* content */}
{ - props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ? + props.alertRender && props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
{ + emit('cancelSelect') + }} closeText={取消选择} />
: null @@ -205,8 +248,10 @@ const JTable = defineComponent({ > { _dataSource.value.map(item => slots.card ? -
{slots.card({row: item, actions: props?.actions || []})}
- : null) +
+ {slots.card(item)} +
: null + ) }
:
@@ -225,7 +270,7 @@ const JTable = defineComponent({ const {column, record} = dt; if((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) { const _key = column?.key || column?.dataIndex - return slots?.[_key]!({row: record, actions: props.actions}) + return slots?.[_key]!(record) } else { return record?.[column?.dataIndex] || '' } diff --git a/src/views/demo/table/index.vue b/src/views/demo/table/index.vue index 77d79fe3..5d305010 100644 --- a/src/views/demo/table/index.vue +++ b/src/views/demo/table/index.vue @@ -1,32 +1,7 @@