import type { ColumnType } from '../../../shared/ui'; import { Data, KeyExpandString, Paths, Path } from '../../../shared/core'; /** * @qin-ui/antd-vue-pro 表格列配置类型 * * @description 继承 Ant Design Vue 的 ColumnType 列类型,并添加: * - 类型安全的 dataIndex(基于泛型 D 推导路径),优先使用 * - key 作为辅助标识,当 dataIndex 不满足需求时使用 * - hidden 属性用于控制列显隐 * - 所有 Ant Design Vue 原生的列属性依然可用(title、width、fixed、align 等) * * @template D - 表格行数据类型 * @public * * @example * ```ts * interface User { name: string; age: number } * * const columns: Columns = [ * { * // dataIndex 是主要字段,关联数据源中对应字段路径 * dataIndex: 'name', * title: '姓名', * width: 120, * }, * { * dataIndex: 'age', * title: '年龄', * width: 80, * }, * ] * ``` */ export type Column = Omit< ColumnType, 'dataIndex' | 'key' > & { /** * @description 列数据路径(主要字段) * 关联数据源中对应字段的路径,支持点号分隔的深层路径和数组路径。 * 优先使用 dataIndex 进行字段匹配。 * * @example 'name' | 'address.city' | ['address', 'city'] */ dataIndex?: KeyExpandString> | Paths; /** * @description 列字段标识(辅助字段) * 仅当 dataIndex 无法满足需求时使用,例如需要在自定义渲染中标识列时。 * 在字段匹配时的优先级低于 dataIndex。 */ key?: Path; /** * @description 是否隐藏该列 * @default false */ hidden?: boolean; }; /** * @qin-ui/antd-vue-pro 表格列配置数组类型 * * @template D - 表格行数据类型 * @public * * @example * ```ts * const columns: Columns = [ * { dataIndex: 'name', title: '姓名' }, * { dataIndex: 'age', title: '年龄' }, * ] * ``` */ export type Columns = Array>; /** * 列控制配置(用于 control.columnControl) * * @template K - 列 key 类型,ProTable 中传入 Path 获得自动补全 * * @example * ```ts * const config: ColumnControlConfig<'name' | 'age'> = { * labels: { name: '姓名', age: '年龄' }, * excludedKeys: [], * disabledKeys: ['name'], * disableCheckAll: false, * } * ``` */ export type ColumnControlConfig = { /** 列在下拉中的显示名称映射,key 为列 key/dataIndex,用于 title 为 vnode 时无法正常渲染 */ labels?: Partial>; /** 不在下拉中出现的列 keys(始终展示,不参与勾选) */ excludedKeys?: K[]; /** 在下拉中显示但不可取消勾选的列 keys(始终展示,始终勾选) */ disabledKeys?: K[]; /** 禁用全选/取消全选 */ disableCheckAll?: boolean; };