Ant Design的穿梭框是一个用于在两个列表之间移动数据项的交互组件。在使用穿梭框时,可以通过属性设置来自定义组件的样式、数据等。
常用的属性有:
- dataSource:数据源,格式为数组,数组中的每个元素为一个对象,代表一条数据。对象中需包含 key 属性,作为数据项的唯一标识符。
- targetKeys:目标项的 key 数组,用于指定已选中的数据项,默认为空数组。
- titles:穿梭框中所显示的标题文本,格式为数组,数组中第一个元素为左侧列表的标题,第二个为右侧列表的标题。
- render(自定义渲染函数):用于自定义列表的每个项的渲染方式。该函数接受一个参数,即当前项数据的对象,需要返回一个 React 元素。
使用时需引入 Transfer 组件,并将 dataSource、titles、targetKeys 等 属性传入 Transfer 组件中。同时,可将自定义渲染函数 render 通过 props 的方式传递给 Transfer 组件,以实现对列表项的自定义渲染。