Transfer 穿梭框

基础用法

可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。

可以使用 titlesbutton-textsrender-contentformat 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表顶部的勾选状态文案进行自定义。

并且,数据项的渲染还可以使用 scoped-slot 进行自定义。 对于列表底部的内容区,提供了两个具名 slotleft-footerright-footer

此外,如果希望某些数据项在初始化时就被勾选,可以使用 left-default-checkedright-default-checked 属性。

最后,本例还展示了 change 事件的用法。

配置选项

Transfer 完全继承了 ElTransfer的属性 您可以从下面的链接里找到相关文档

typescript声明

type TransferProps = VueProps<typeof ElTransfer>
export interface VTransferItem<T extends object, Key extends DeepKey<T> = DeepKey<T>> extends VBaseItem<T, Key> {
  /**
   * 类型 rate
   */
  /**
   * `element-plus {@link ElRate}`的属性
   */
  props?: VPropDef<T, TransferProps>
  slots?: {
    /**
     * 自定义数据项的内容, 参数为 { option }
     */
    default?: (param: { option: any }) => (JSX.Element | JSX.Element[] | string)
    /**
     * 左侧列表底部的内容
     */
    "left-footer"?: () => (JSX.Element | JSX.Element[] | string)
    /**
     * 右侧列表底部的内容
     */
    "right-footer	"?: () => (JSX.Element | JSX.Element[] | string)
  },
  transfer?: VTransfer<Into<T, Key>, string | number>
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26