fix: 配置表格行操作省略
This commit is contained in:
parent
7638250c70
commit
6221487991
@ -33,7 +33,6 @@ import { renderKtTableSummary } from './components/KtTableSummary';
|
|||||||
import {
|
import {
|
||||||
KT_TABLE_ACTION_COLUMN_KEY,
|
KT_TABLE_ACTION_COLUMN_KEY,
|
||||||
KT_TABLE_INDEX_COLUMN_KEY,
|
KT_TABLE_INDEX_COLUMN_KEY,
|
||||||
KT_TABLE_ROW_ACTION_OVERFLOW_LIMIT,
|
|
||||||
KT_TABLE_ROW_ACTION_VISIBLE_COUNT,
|
KT_TABLE_ROW_ACTION_VISIBLE_COUNT,
|
||||||
} from './config/constants';
|
} from './config/constants';
|
||||||
import { DEFAULT_TABLE_SETTING, ktTableProps } from './config/ktTableProps';
|
import { DEFAULT_TABLE_SETTING, ktTableProps } from './config/ktTableProps';
|
||||||
@ -729,7 +728,9 @@ export default defineComponent({
|
|||||||
* @param actions 当前行可见操作按钮列表。
|
* @param actions 当前行可见操作按钮列表。
|
||||||
*/
|
*/
|
||||||
function splitRowActions(actions: KtTableRowAction[]) {
|
function splitRowActions(actions: KtTableRowAction[]) {
|
||||||
if (actions.length <= KT_TABLE_ROW_ACTION_OVERFLOW_LIMIT) {
|
const visibleCount = resolveRowActionVisibleCount();
|
||||||
|
|
||||||
|
if (actions.length <= visibleCount) {
|
||||||
return {
|
return {
|
||||||
inlineActions: actions,
|
inlineActions: actions,
|
||||||
overflowActions: [],
|
overflowActions: [],
|
||||||
@ -737,11 +738,24 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
inlineActions: actions.slice(0, KT_TABLE_ROW_ACTION_VISIBLE_COUNT),
|
inlineActions: actions.slice(0, visibleCount),
|
||||||
overflowActions: actions.slice(KT_TABLE_ROW_ACTION_VISIBLE_COUNT),
|
overflowActions: actions.slice(visibleCount),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解析行操作内联按钮数量,异常配置回退到默认两个。
|
||||||
|
*/
|
||||||
|
function resolveRowActionVisibleCount() {
|
||||||
|
const visibleCount = Number(props.rowActionVisibleCount);
|
||||||
|
|
||||||
|
if (!Number.isFinite(visibleCount)) {
|
||||||
|
return KT_TABLE_ROW_ACTION_VISIBLE_COUNT;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Math.max(0, Math.floor(visibleCount));
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 渲染表格头部左侧业务按钮和 toolbar 插槽。
|
* 渲染表格头部左侧业务按钮和 toolbar 插槽。
|
||||||
*/
|
*/
|
||||||
|
|||||||
@ -12,8 +12,6 @@ export const KT_TABLE_DEFAULT_ROW_RESIZE_MAX_HEIGHT = 140;
|
|||||||
|
|
||||||
export const KT_TABLE_DEFAULT_ROW_RESIZE_MIN_HEIGHT = 40;
|
export const KT_TABLE_DEFAULT_ROW_RESIZE_MIN_HEIGHT = 40;
|
||||||
|
|
||||||
export const KT_TABLE_ROW_ACTION_OVERFLOW_LIMIT = 3;
|
|
||||||
|
|
||||||
export const KT_TABLE_ROW_ACTION_VISIBLE_COUNT = 2;
|
export const KT_TABLE_ROW_ACTION_VISIBLE_COUNT = 2;
|
||||||
|
|
||||||
export const KT_TABLE_DEFAULT_PAGE_SIZE = 10;
|
export const KT_TABLE_DEFAULT_PAGE_SIZE = 10;
|
||||||
|
|||||||
@ -21,6 +21,7 @@ import {
|
|||||||
KT_TABLE_DEFAULT_PAGE_SIZE_OPTIONS,
|
KT_TABLE_DEFAULT_PAGE_SIZE_OPTIONS,
|
||||||
KT_TABLE_DEFAULT_ROW_RESIZE_MAX_HEIGHT,
|
KT_TABLE_DEFAULT_ROW_RESIZE_MAX_HEIGHT,
|
||||||
KT_TABLE_DEFAULT_ROW_RESIZE_MIN_HEIGHT,
|
KT_TABLE_DEFAULT_ROW_RESIZE_MIN_HEIGHT,
|
||||||
|
KT_TABLE_ROW_ACTION_VISIBLE_COUNT,
|
||||||
} from './constants';
|
} from './constants';
|
||||||
|
|
||||||
export const DEFAULT_TABLE_SETTING: Required<KtTableSetting> = {
|
export const DEFAULT_TABLE_SETTING: Required<KtTableSetting> = {
|
||||||
@ -45,6 +46,7 @@ export const KT_TABLE_PROP_KEYS = [
|
|||||||
'pageSize',
|
'pageSize',
|
||||||
'pageSizeOptions',
|
'pageSizeOptions',
|
||||||
'rowActions',
|
'rowActions',
|
||||||
|
'rowActionVisibleCount',
|
||||||
'rowResizeMaxHeight',
|
'rowResizeMaxHeight',
|
||||||
'rowResizeMinHeight',
|
'rowResizeMinHeight',
|
||||||
'rowResizable',
|
'rowResizable',
|
||||||
@ -83,6 +85,7 @@ export function createDefaultTableProps(): KtTableResolvedProps<
|
|||||||
pageSize: KT_TABLE_DEFAULT_PAGE_SIZE,
|
pageSize: KT_TABLE_DEFAULT_PAGE_SIZE,
|
||||||
pageSizeOptions: KT_TABLE_DEFAULT_PAGE_SIZE_OPTIONS,
|
pageSizeOptions: KT_TABLE_DEFAULT_PAGE_SIZE_OPTIONS,
|
||||||
rowActions: [],
|
rowActions: [],
|
||||||
|
rowActionVisibleCount: KT_TABLE_ROW_ACTION_VISIBLE_COUNT,
|
||||||
rowResizeMaxHeight: KT_TABLE_DEFAULT_ROW_RESIZE_MAX_HEIGHT,
|
rowResizeMaxHeight: KT_TABLE_DEFAULT_ROW_RESIZE_MAX_HEIGHT,
|
||||||
rowResizeMinHeight: KT_TABLE_DEFAULT_ROW_RESIZE_MIN_HEIGHT,
|
rowResizeMinHeight: KT_TABLE_DEFAULT_ROW_RESIZE_MIN_HEIGHT,
|
||||||
rowResizable: false,
|
rowResizable: false,
|
||||||
@ -154,6 +157,10 @@ export const ktTableProps = {
|
|||||||
default: () => [],
|
default: () => [],
|
||||||
type: Array as PropType<KtTableRowAction[]>,
|
type: Array as PropType<KtTableRowAction[]>,
|
||||||
},
|
},
|
||||||
|
rowActionVisibleCount: {
|
||||||
|
default: KT_TABLE_ROW_ACTION_VISIBLE_COUNT,
|
||||||
|
type: Number,
|
||||||
|
},
|
||||||
rowResizeMaxHeight: {
|
rowResizeMaxHeight: {
|
||||||
default: KT_TABLE_DEFAULT_ROW_RESIZE_MAX_HEIGHT,
|
default: KT_TABLE_DEFAULT_ROW_RESIZE_MAX_HEIGHT,
|
||||||
type: Number,
|
type: Number,
|
||||||
|
|||||||
@ -234,6 +234,7 @@ export interface KtTableProps<
|
|||||||
pageSize?: number;
|
pageSize?: number;
|
||||||
pageSizeOptions?: string[];
|
pageSizeOptions?: string[];
|
||||||
rowActions?: Array<KtTableRowAction<Row, SearchValues>>;
|
rowActions?: Array<KtTableRowAction<Row, SearchValues>>;
|
||||||
|
rowActionVisibleCount?: number;
|
||||||
rowResizeMaxHeight?: number;
|
rowResizeMaxHeight?: number;
|
||||||
rowResizeMinHeight?: number;
|
rowResizeMinHeight?: number;
|
||||||
rowResizable?: boolean;
|
rowResizable?: boolean;
|
||||||
@ -263,6 +264,7 @@ export type KtTableResolvedProps<
|
|||||||
pageSize: number;
|
pageSize: number;
|
||||||
pageSizeOptions: string[];
|
pageSizeOptions: string[];
|
||||||
rowActions: Array<KtTableRowAction<Row, SearchValues>>;
|
rowActions: Array<KtTableRowAction<Row, SearchValues>>;
|
||||||
|
rowActionVisibleCount: number;
|
||||||
rowKey: ((row: Row) => string) | keyof Row | string;
|
rowKey: ((row: Row) => string) | keyof Row | string;
|
||||||
rowResizable: boolean;
|
rowResizable: boolean;
|
||||||
rowResizeMaxHeight: number;
|
rowResizeMaxHeight: number;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user