select-transfer

PC双栏同步选择组件 @alife/select-transfer

title: PC双栏同步选择组件 subtitle: select-transfer cols: 2

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);