feat: Transfer 系列 LeftOptions 可以支持动态加载 (#2974)

* feat: Transfer 系列 LeftOptions 可以支持动态加载

* 补充文档
This commit is contained in:
liaoxuezhi 2021-11-17 19:36:13 +08:00 committed by GitHub
parent eb38a50763
commit 1393b4ea7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 90 additions and 10 deletions

View File

@ -869,6 +869,24 @@ _多选_
}
```
leftOptions 动态加载,默认 source 接口是返回 options 部分,而 leftOptions 是没有对应的接口可以动态返回了。为了方便,目前如果 source 接口返回的选中中,第一个 option 是以下这种格式则也会把 options[0].leftOptions 当成 leftOptions, options[0].children 当 options。同时 options[0].leftDefaultValue 可以用来配置左侧选项的默认值。
```
{
status: 0,
msg: '',
data: {
options: [
{
leftOptions: [],
children: [],
leftDefaultValue: ''
}
]
}
}
```
## searchApi
**发送**

View File

@ -506,6 +506,24 @@ icon:
}
```
leftOptions 动态加载,默认 source 接口是返回 options 部分,而 leftOptions 是没有对应的接口可以动态返回了。为了方便,目前如果 source 接口返回的选中中,第一个 option 是以下这种格式则也会把 options[0].leftOptions 当成 leftOptions, options[0].children 当 options。同时 options[0].leftDefaultValue 可以用来配置左侧选项的默认值。
```
{
status: 0,
msg: '',
data: {
options: [
{
leftOptions: [],
children: [],
leftDefaultValue: ''
}
]
}
}
```
## searchApi
**发送**

View File

@ -42,7 +42,7 @@ export class BaseSelection<
placeholder: 'placeholder.noOption',
itemRender: (option: Option) => <span>{option.label}</span>,
multiple: true,
clearable: true
clearable: false
};
static value2array(

View File

@ -351,7 +351,6 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
const {
className,
classnames: cx,
options,
selectedOptions,
sortable,
loading,
@ -363,11 +362,26 @@ class TransferDropdownRenderer extends BaseTransferRenderer<TransferDropDownProp
selectTitle,
selectMode,
multiple,
leftMode,
leftOptions,
columns
columns,
leftMode
} = this.props;
// 目前 LeftOptions 没有接口可以动态加载
// 为了方便可以快速实现动态化,让选项的第一个成员携带
// LeftOptions 信息
let {options, leftOptions, leftDefaultValue} = this.props;
if (
selectMode === 'associated' &&
options &&
options.length === 1 &&
options[0].leftOptions &&
Array.isArray(options[0].children)
) {
leftOptions = options[0].leftOptions;
leftDefaultValue = options[0].leftDefaultValue ?? leftDefaultValue;
options = options[0].children;
}
return (
<>
<TransferDropDown

View File

@ -249,7 +249,6 @@ export class BaseTransferRenderer<
const {
className,
classnames: cx,
options,
selectedOptions,
showArrow,
sortable,
@ -260,7 +259,6 @@ export class BaseTransferRenderer<
searchResultMode,
searchResultColumns,
deferLoad,
leftOptions,
leftMode,
rightMode,
disabled,
@ -270,6 +268,22 @@ export class BaseTransferRenderer<
resultItemRender
} = this.props;
// 目前 LeftOptions 没有接口可以动态加载
// 为了方便可以快速实现动态化,让选项的第一个成员携带
// LeftOptions 信息
let {options, leftOptions, leftDefaultValue} = this.props;
if (
selectMode === 'associated' &&
options &&
options.length === 1 &&
options[0].leftOptions &&
Array.isArray(options[0].children)
) {
leftOptions = options[0].leftOptions;
leftDefaultValue = options[0].leftDefaultValue ?? leftDefaultValue;
options = options[0].children;
}
return (
<div className={cx('TransferControl', className)}>
<Transfer

View File

@ -78,7 +78,6 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
const {
className,
classnames: cx,
options,
selectedOptions,
sortable,
loading,
@ -92,12 +91,29 @@ export class TransferPickerRenderer extends BaseTransferRenderer<TabsTransferPro
pickerSize,
columns,
leftMode,
leftOptions
selectMode
} = this.props;
// 目前 LeftOptions 没有接口可以动态加载
// 为了方便可以快速实现动态化,让选项的第一个成员携带
// LeftOptions 信息
let {options, leftOptions, leftDefaultValue} = this.props;
if (
selectMode === 'associated' &&
options &&
options.length === 1 &&
options[0].leftOptions &&
Array.isArray(options[0].children)
) {
leftOptions = options[0].leftOptions;
leftDefaultValue = options[0].leftDefaultValue ?? leftDefaultValue;
options = options[0].children;
}
return (
<div className={cx('TabsTransferControl', className)}>
<div className={cx('TransferControl', className)}>
<TransferPicker
selectMode={selectMode}
value={selectedOptions}
disabled={disabled}
options={options}