1.0.2 • Published 3 years ago
select-transfer v1.0.2
PC双栏同步选择组件 @alife/select-transfer
PC双栏同步选择组件
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| loading | 是否在加载中 | boolean | false |
| dataSource | 左边栏列表数据 | Array<{checked: boolean, itemId: string}> | [] |
| selectedResList | 右边栏已选数据 | Array<{itemId: string}> | [] |
| maxSelectNum | 最大选择数量 | number | undefined |
| canAllSelect | 可否全选 | boolean | true |
| allListTitle | 左侧列表标题文案 | string | '' |
| other | 其他数据 | any | undefined |
| renderItemContext | 渲染子列表元素方案 | Function | () => {} |
| handleWarnning | 报错提示方法 | Function | () => {} |
| handleSelectRes | 选择元素方法 | Function | () => {} |
PC模板
import SelectTransferPC from "@alife/select-transfer";
const dataMock = [
{checked: false, itemId: '1', title: 1},
{checked: false, itemId: '2', title: 2},
{checked: false, itemId: '3', title: 3},
{checked: false, itemId: '4', title: 4},
{checked: false, itemId: '5', title: 5},
{checked: false, itemId: '6', title: 6},
];
const selectedExample = [{itemId: '2', title: 2}, {itemId: '3', title: 3}];
const maxSelectNum = 5;
class Demo extends React.Component {
state = {
selectedList: selectedExample,
dataSource: [],
}
async componentDidMount() {
this.setState({
loading: true,
})
const dataSource = await this.mockFetchData();
this.setState({
dataSource,
loading: false,
})
}
mockFetchData = () => {
return new Promise((resolve, reject) => {
try {
setTimeout(() => {
resolve(dataMock)
}, 2000);
} catch(err) {
reject(err)
}
});
}
renderItemContext = (props) => {
return <div>{props.title}</div>
}
handleWarnning = (errObj) => {
console.log('错误', errObj.errorMsg)
}
handleSelectRes = (res) => {
const { selectedResList = [] } = res;
this.setState({
selectedList: [...selectedResList],
})
}
render() {
const { selectedList, dataSource, loading } = this.state;
return (
<SelectTransferPC dataSource={dataSource}
selectedResList={selectedList}
maxSelectNum={maxSelectNum}
loading={loading}
canAllSelect={true}
allListTitle='全部'
renderItemContext={this.renderItemContext}
handleWarnning={this.handleWarnning}
handleSelectRes={this.handleSelectRes}
/>
);
}
}
ReactDOM.render(<Demo />, mountNode);