@@ -29,7 +29,7 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
-
+
@@ -59,7 +59,7 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
2/14 itemsSource
-
-
+
@@ -74,7 +74,7 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
-
+
20 items
-
-
+
@@ -125,7 +125,7 @@ exports[`renders ./components/transfer/demo/custom-item.md correctly 1`] = `
-
+
-
`;
+
+exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
+
- ![No Data]()
+
@@ -2234,3 +2258,224 @@ exports[`renders ./components/transfer/demo/search.md correctly 1`] = `
+
No Data
+
+`;
diff --git a/components/transfer/__tests__/__snapshots__/index.test.js.snap b/components/transfer/__tests__/__snapshots__/index.test.js.snap
index 98bab0925..b32fec2be 100644
--- a/components/transfer/__tests__/__snapshots__/index.test.js.snap
+++ b/components/transfer/__tests__/__snapshots__/index.test.js.snap
@@ -4,9 +4,12 @@ exports[`Transfer should render correctly 1`] = `
+
+
+
+
+ 14 items
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+ |
+
+ Name
+ |
+
+ Tag
+ |
+
+ Description
+ |
+
|---|---|---|---|
| + | + content1 | ++ | description of content1 | +
| + | + content2 | ++ | description of content2 | +
| + | + content4 | ++ | description of content4 | +
| + | + content5 | ++ | description of content5 | +
| + | + content7 | ++ | description of content7 | +
| + | + content8 | ++ | description of content8 | +
| + | + content10 | ++ | description of content10 | +
| + | + content11 | ++ | description of content11 | +
| + | + content13 | ++ | description of content13 | +
| + | + content14 | ++ | description of content14 | +
+
+ 6 items
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+
+ |
+
+ Name
+ |
+
|---|---|
| + | + content3 | +
| + | + content6 | +
| + | + content9 | +
| + | + content12 | +
| + | + content15 | +
| + | + content18 | +
-
+
- +
- 1 +
- + +
1/2 items
-
+
-
+
- +
- +
1 item
-
+
-
+
- +
1 item
-
+
-
+
- a +
2 items
-
+
-
+
- c +
- b +
1/3
-
+
-
+
- +
- +
- +
+
+
+
+
+
+
+```
diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md
index 3103a4fb6..6f870432f 100644
--- a/components/transfer/index.en-US.md
+++ b/components/transfer/index.en-US.md
@@ -1,20 +1,21 @@
## API
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}\] | \[] |
-| disabled | Whether disabled transfer | boolean | false |
-| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | |
-| footer | customize the progress dot by setting a scoped slot | slot="footer" slot-scope="props" | |
-| lazy | property of vc-lazy-load for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` |
-| listStyle | A custom CSS style used for rendering the transfer columns. | object | |
-| locale | i18n text including filter, empty text, item unit, etc | object | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` |
-| operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] |
-| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) | |
-| selectedKeys | A set of keys of selected items. | string\[] | \[] |
-| showSearch | If included, a search box is shown on each column. | boolean | false |
-| targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] |
-| titles | A set of titles that are sorted from left to right. | string\[] | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}\] | \[] | |
+| disabled | Whether disabled transfer | boolean | false | |
+| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | | |
+| footer | customize the progress dot by setting a scoped slot | slot="footer" slot-scope="props" | | |
+| lazy | property of vc-lazy-load for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` | |
+| listStyle | A custom CSS style used for rendering the transfer columns. | object | | |
+| locale | i18n text including filter, empty text, item unit, etc | object | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` | |
+| operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] | |
+| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) | | |
+| selectedKeys | A set of keys of selected items. | string\[] | \[] | |
+| showSearch | If included, a search box is shown on each column. | boolean | false | |
+| showSelectAll | Show select all checkbox on the header | boolean | true | 1.5.0 |
+| targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] | |
+| titles | A set of titles that are sorted from left to right. | string\[] | - | |
### events
@@ -25,6 +26,57 @@
| search | A callback function which is executed when search field are changed | (direction: 'left'\|'right', value: string): void | - |
| selectChange | A callback function which is executed when selected items are changed. | (sourceSelectedKeys, targetSelectedKeys): void | |
+### Render Props
+
+New in 1.5.0. Transfer accept `children` to customize render list, using follow props:
+
+```json
+{
+ "props": {
+ "direction": String,
+ "disabled": Boolean,
+ "filteredItems": Array,
+ "selectedKeys": Array
+ },
+ "on": {
+ "itemSelect": Function,
+ "itemSelectAll": Function
+ }
+}
+```
+
+| Property | Description | Type | Version |
+| --------------- | ----------------------- | ----------------------------------- | ------- |
+| direction | List render direction | 'left' \| 'right' | 1.5.0 |
+| disabled | Disable list or not | boolean | 1.5.0 |
+| filteredItems | Filtered items | TransferItem[] | 1.5.0 |
+| onItemSelect | Select item | (key: string, selected: boolean) | 1.5.0 |
+| onItemSelectAll | Select a group of items | (keys: string[], selected: boolean) | 1.5.0 |
+| selectedKeys | Selected items | string[] | 1.5.0 |
+
+#### example
+
+```html
+- ', '<'] |
-| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record) | |
-| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] |
-| showSearch | 是否显示搜索框 | boolean | false |
-| targetKeys | 显示在右侧框数据的 key 集合 | string\[] | \[] |
-| titles | 标题集合，顺序从左至右 | string\[] | \['', ''] |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}\]\[] | \[] | |
+| disabled | 是否禁用 | boolean | false | |
+| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | (inputValue, option): boolean | | |
+| footer | 可以设置为一个 作用域插槽 | slot="footer" slot-scope="props" | | |
+| lazy | Transfer 使用了 [vc-lazy-load]优化性能，这里可以设置相关参数。设为 `false` 可以关闭懒加载。 | object\|boolean | `{ height: 32, offset: 32 }` | |
+| listStyle | 两个穿梭框的自定义样式 | object | | |
+| locale | 各种语言 | object | `{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }` | |
+| operations | 操作文案集合，顺序从上至下 | string\[] | \['>', '<'] | |
+| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record) | | |
+| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] | |
+| showSearch | 是否显示搜索框 | boolean | false | |
+| showSelectAll | 是否展示全选勾选框 | boolean | true | 1.5.0 |
+| targetKeys | 显示在右侧框数据的 key 集合 | string\[] | \[] | |
+| titles | 标题集合，顺序从左至右 | string\[] | \['', ''] | |
### 事件
@@ -25,6 +26,57 @@
| search | 搜索框内容时改变时的回调函数 | (direction: 'left'\|'right', value: string): void | - |
| selectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | |
+### Render Props
+
+1.5.0 新增。Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数：
+
+```json
+{
+ "props": {
+ "direction": String,
+ "disabled": Boolean,
+ "filteredItems": Array,
+ "selectedKeys": Array
+ },
+ "on": {
+ "itemSelect": Function,
+ "itemSelectAll": Function
+ }
+}
+```
+
+| 参数 | 说明 | 类型 | 版本 |
+| ------------- | -------------- | ----------------------------------- | ----- |
+| direction | 渲染列表的方向 | 'left' \| 'right' | 1.5.0 |
+| disabled | 是否禁用列表 | boolean | 1.5.0 |
+| filteredItems | 过滤后的数据 | TransferItem[] | 1.5.0 |
+| selectedKeys | 选中的条目 | string[] | 1.5.0 |
+| itemSelect | 勾选条目 | (key: string, selected: boolean) | 1.5.0 |
+| itemSelectAll | 勾选一组条目 | (keys: string[], selected: boolean) | 1.5.0 |
+
+#### 参考示例
+
+```html
+
- - ); - }); + // ================================= List Body ================================= const unit = dataSource.length > 1 ? itemsUnit : itemUnit; - const search = showSearch ? ( -
+
+ ) : null;
+
+ let listBody = bodyDom;
+ if (!listBody) {
+ let bodyNode;
+
+ const { bodyContent, customize } = renderListNode(this.$createElement, renderList, {
+ props: { ...this.$props, filteredItems, filteredRenderItems, selectedKeys: checkedKeys },
+ on: getListeners(this),
+ });
+
+ // We should wrap customize list body in a classNamed div to use flex layout.
+ if (customize) {
+ bodyNode = {bodyContent}
;
+ } else {
+ bodyNode = filteredItems.length ? (
+ bodyContent
+ ) : (
+ {notFoundContent}
+ );
+ }
+
+ listBody = (
+
+ {search}
+ {bodyNode}
+
+ );
+ }
+ return listBody;
+ },
+
+ getCheckBox(filteredItems, showSelectAll, disabled) {
+ const checkStatus = this.getCheckStatus(filteredItems);
+ const checkedAll = checkStatus === 'all';
+ const checkAllCheckbox = showSelectAll !== false && (
+
-
- ) : null;
- const transitionName = this.mounted ? `${prefixCls}-content-item-highlight` : '';
- const transitionProps = getTransitionProps(transitionName, {
- leave: noop,
- });
-
- const searchNotFound = showItems.every(item => item === null) && (
- {notFoundContent}
- );
- const listBody = bodyDom || (
-
- {search}
- {!searchNotFound && (
-
- {showItems}
-
- )}
- {searchNotFound}
-
+ const listBody = this.getListBody(
+ prefixCls,
+ searchPlaceholder,
+ filterValue,
+ filteredItems,
+ notFoundContent,
+ bodyDom,
+ filteredRenderItems,
+ checkedKeys,
+ renderList,
+ showSearch,
+ disabled,
);
const listFooter = footerDom ? : null;
- const checkStatus = this.getCheckStatus(filteredDataSource);
- const checkedAll = checkStatus === 'all';
- const checkAllCheckbox = (
-
@@ -279,7 +339,7 @@ export default {
{checkAllCheckbox}
- {(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + totalDataSource.length}{' '}
+ {(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + filteredItems.length}{' '}
{unit}
{titleText}
diff --git a/components/transfer/renderListBody.jsx b/components/transfer/renderListBody.jsx
new file mode 100644
index 000000000..e58a239e6
--- /dev/null
+++ b/components/transfer/renderListBody.jsx
@@ -0,0 +1,108 @@
+import raf from '../_util/raf';
+import ListItem from './ListItem';
+import PropTypes from '../_util/vue-types';
+import getTransitionProps from '../_util/getTransitionProps';
+function noop() {}
+const ListBody = {
+ name: 'ListBody',
+ inheritAttrs: false,
+ props: {
+ prefixCls: PropTypes.string,
+ filteredRenderItems: PropTypes.array.def([]),
+ lazy: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+ selectedKeys: PropTypes.array,
+ disabled: PropTypes.bool,
+ },
+ data() {
+ return {
+ mounted: false,
+ };
+ },
+ computed: {
+ itemsLength() {
+ return this.filteredRenderItems ? this.filteredRenderItems.length : 0;
+ },
+ },
+ watch: {
+ itemsLength() {
+ this.$nextTick(() => {
+ const { lazy } = this.$props;
+ if (lazy !== false) {
+ const container = this.$el;
+ raf.cancel(this.lazyId);
+ this.lazyId = raf(() => {
+ if (container) {
+ const scrollEvent = new Event('scroll', { bubbles: true });
+ container.dispatchEvent(scrollEvent);
+ }
+ });
+ }
+ });
+ },
+ },
+ mounted() {
+ this.mountId = raf(() => {
+ this.mounted = true;
+ });
+ },
+
+ beforeDestroy() {
+ raf.cancel(this.mountId);
+ raf.cancel(this.lazyId);
+ },
+ methods: {
+ onItemSelect(item) {
+ const { selectedKeys } = this.$props;
+ const checked = selectedKeys.indexOf(item.key) >= 0;
+ this.$emit('itemSelect', item.key, !checked);
+ },
+ onScroll(e) {
+ this.$emit('scroll', e);
+ },
+ },
+ render() {
+ const { mounted } = this.$data;
+ const {
+ prefixCls,
+ filteredRenderItems,
+ lazy,
+ selectedKeys,
+ disabled: globalDisabled,
+ } = this.$props;
+ const items = filteredRenderItems.map(({ renderedEl, renderedText, item }) => {
+ const { disabled } = item;
+ const checked = selectedKeys.indexOf(item.key) >= 0;
+
+ return (
+
+ {items}
+
+ );
+ },
+};
+
+export default (h, props) =>