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