We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add basic transfer component
Transfer____ TransferSourceList____ TransferListItem | |____ TransferListHeader | |____ TransferListBody | |____ TransferListFooter | |____ TransferOperations
穿梭框列表统一使用的参数集合,在插槽与依赖注入时使用,通常用于穿梭框列表自定义,参数根据源数据列表与目标数据列表而划分,详细见下方文档
export interface TransferBindings<T = unknown> { // 分割好的数据 data: ComputedRef<T[]> // 过滤后的数据 filteredData: ComputedRef<T[]> // 分页处理过后的数据 paginatedData: ComputedRef<T[]> // 源数据 dataSource: ComputedRef<T[]> // 数据key与数据项对应Map dataKeyMap: ComputedRef<Map<VKey, T>> // 过滤后的源数据 filteredDataSource: ComputedRef<T[]> // 分页后的源数据 paginatedDataSource: ComputedRef<T[]> // 已选数据 selectedData: ComputedRef<T[]> // 已选数据key集合 selectedKeys: ComputedRef<Set<VKey>> // 已勾选数据 checkedKeys: ComputedRef<Set<VKey>> // 禁用数据key集合 disabledKeys: ComputedRef<Set<VKey>> // 全部勾选状态 checkAllStatus: ComputedRef<boolean> // 是否展示左右箭头操作按钮 showOperations: ComputedRef<boolean> // 是否展示全部勾选框 showCheckAll: ComputedRef<boolean> // 是否可搜索 searchable: ComputedRef<boolean> // 分页配置 pagination: ComputedRef<PaginationProps | null> // 勾选状态改变触发函数 handleCheckChange: (keys: Set<VKey> | VKey[]) => void // 增加已选数据触发函数 triggerAppend: (data?: T[]) => void // 移除已选数据触发函数 triggerRemove: (keys?: VKey[]) => void // 清除已选数据触发函数 triggerClear: () => void // 数据key获取函数 getRowKey: GetRowKey // 全部勾选触发函数 checkAll: (checked?: boolean) => void // 搜索输入 searchValue: ComputedRef<string | undefined> // 搜索输入触发函数 handleSearchChange: (value: string | undefined) => void }
dataSource
object[]
[]
v-model:selectedData
disabled
boolean
false
itemDisabled
(item: unknown) => boolean
item => item.disabled
rowKey
key
string | (item: unknown) => string | number
'key'
virtual
scroll.y
onSourceScroll
(evt: Event) => void
onSourceScrolledChange
(startIndex: number, endIndex: number, visibleNodes: unknown[]) => void
onSourceScrolledBottom
() => void
customLabel
label
string | (item: unknown) => VNodeChild
listStyle
searchable
true
v-model:searchValue
searchPlaceholder
string
'搜索关键字'
sourcePagination
boolean | PaginationProps
targetPagination
showOperations
showListHeader
showListFooter
showCheckAll
onSelectChange
(data: unknown[]) => void
onSearchChange
onSourceCheckAll
(checked: boolean) => void
onTargetCheckAll
onSourceNodeClick
(evt: Event, item: unknown) => void
onTargetNodeClick
onSourceNodeContextmenu
onTargetNodeContextmenu
default
TransferBindings & { isSource: boolean }
header
footer
sourceScrollTo
(option?: number | VirtualScrollToOptions) => void
targetScrollTo
可以结合插槽注入该 token 来获取自定义源数据穿梭框所需要的API与参数
token
export const TRANSFER_SOURCE_TOKEN: InjectionKey<TransferBindings> = Symbol('TRANSFER_SOURCE_TOKEN')
export const TRANSFER_TARGET_TOKEN: InjectionKey<TransferBindings> = Symbol('TRANSFER_TARGET_TOKEN')
可以通过该 token 注入自定义的数据处理逻辑来自定义穿梭框,例如自定义树形数据的处理逻辑
export interface SeparatedData<T = unknown> { sourceData: T[] targetData: T[] } export interface TransferDataStrategies<T = unknown> { genDataKeys: (data: T[], getRowKey: GetRowKey) => Set<VKey> genDataKeyMap: (dataSource: T[], getRowKey: GetRowKey) => Map<VKey, T> separateDataSource: ( dataSource: T[], selectedData: T[], selectedKeys: Set<VKey>, getRowKey: GetRowKey, ) => SeparatedData<T> checkDisabled: (item: T, dataSource: T[], itemDisabled: ((item: T) => boolean) | undefined) => boolean dataFilter: (data: T[], searchValue: string | undefined, searchFn: SearchFn<T> | undefined) => T[] appendSelectedData: ( data: T[], selectedData: T[], selectedKeys: Set<VKey>, getRowKey: GetRowKey, setSelectedData: (value: T[]) => void, ) => void removeSelectedData: ( keys: VKey[], selectedData: T[], selectedKeys: Set<VKey>, getRowKey: GetRowKey, setSelectedData: (value: T[]) => void, ) => void }
export const TRANSFER_DATA_STRATEGIES: InjectionKey<TransferDataStrategies | null> = Symbol('TRANSFER_DATA_STRATEGIES')
The text was updated successfully, but these errors were encountered:
export interface TransferData { key?: VKey label?: string disabled?: boolean additional?: { class?: any style?: any [key: string]: unknown } }
其他的一些 API,例如 methods, 或者对外暴露的 token 的内容,你再仔细斟酌一下。
Sorry, something went wrong.
e861615
danranVm
No branches or pull requests
What problem does this feature solve?
add basic transfer component
What does the proposed API look like?
Components Structure
API
TransferBindings
穿梭框列表统一使用的参数集合,在插槽与依赖注入时使用,通常用于穿梭框列表自定义,参数根据源数据列表与目标数据列表而划分,详细见下方文档
IxTransfer
TransferProps
dataSource
object[]
[]
v-model:selectedData
disabled
boolean
false
itemDisabled
(item: unknown) => boolean
item => item.disabled
rowKey
key
的取值string | (item: unknown) => string | number
'key'
virtual
boolean
false
scroll.y
onSourceScroll
(evt: Event) => void
virtual
下可用onSourceScrolledChange
(startIndex: number, endIndex: number, visibleNodes: unknown[]) => void
virtual
下可用onSourceScrolledBottom
() => void
virtual
下可用onSourceScroll
(evt: Event) => void
virtual
下可用onSourceScrolledChange
(startIndex: number, endIndex: number, visibleNodes: unknown[]) => void
virtual
下可用onSourceScrolledBottom
() => void
virtual
下可用customLabel
label
渲染string | (item: unknown) => VNodeChild
listStyle
searchable
boolean
true
v-model:searchValue
searchPlaceholder
string
'搜索关键字'
sourcePagination
boolean | PaginationProps
false
targetPagination
boolean | PaginationProps
false
showOperations
boolean
true
showListHeader
boolean
true
showListFooter
boolean
false
showCheckAll
boolean
true
onSelectChange
(data: unknown[]) => void
onSearchChange
onSourceCheckAll
(checked: boolean) => void
onTargetCheckAll
(checked: boolean) => void
onSourceNodeClick
(evt: Event, item: unknown) => void
onTargetNodeClick
(evt: Event, item: unknown) => void
onSourceNodeContextmenu
(evt: Event, item: unknown) => void
onTargetNodeContextmenu
(evt: Event, item: unknown) => void
TransferSlots
default
TransferBindings & { isSource: boolean }
header
TransferBindings & { isSource: boolean }
footer
TransferBindings & { isSource: boolean }
TransferMethods
sourceScrollTo
(option?: number | VirtualScrollToOptions) => void
virtual
下可用targetScrollTo
(option?: number | VirtualScrollToOptions) => void
virtual
下可用Tokens
TRANSFER_SOURCE_TOKEN
可以结合插槽注入该
token
来获取自定义源数据穿梭框所需要的API与参数TRANSFER_TARGET_TOKEN
可以结合插槽注入该
token
来获取自定义源数据穿梭框所需要的API与参数TRANSFER_DATA_STRATEGIES
可以通过该
token
注入自定义的数据处理逻辑来自定义穿梭框,例如自定义树形数据的处理逻辑The text was updated successfully, but these errors were encountered: