Transfer 穿梭框

() => {
  const [data, setdata] = React.useState([])
  const [value, setvalue] = React.useState([1, 4])
  React.useEffect(() => {
    initData()
  }, [])
  function initData() {
    let res = []
    for (let i = 1; i <= 20; i++) {
      res.push({
        key: i,
        label: `选择项${i}`,
        disabled: i % 4 == 0,
      })
    }
    setdata(res)
  }
  return (
    <Transfer data={data} value={value} onChange={val => setvalue(val)} />
  )
}

() => {
  const [data, setdata] = React.useState([])
  const [value, setvalue] = React.useState([1, 4])
  React.useEffect(() => {
    initData()
  }, [])
  function initData() {
    let res = []
    for (let i = 1; i <= 20; i++) {
      res.push({
        id: i,
        name: `选择项${i}`,
      })
    }
    setdata(res)
  }
  return (
    <Transfer
      data={data}
      value={value}
      onChange={val => setvalue(val)}
      propsAlias={{
        key: 'id',
        label: 'name',
      }}
    />
  )
}

() => {
  const [data, setdata] = React.useState([])
  const [value, setvalue] = React.useState([1, 4])
  React.useEffect(() => {
    initData()
  }, [])
  function initData() {
    let res = []
    for (let i = 1; i <= 20; i++) {
      res.push({
        id: i,
        name: `选择项${i}`,
        pinyin: `xuanzekuang${i}`,
      })
    }
    setdata(res)
  }
  function _filterMethod(query, item) {
    return item.pinyin.indexOf(query) > -1
  }
  return (
    <Transfer
      data={data}
      value={value}
      onChange={val => setvalue(val)}
      filterable
      filterMethod={_filterMethod}
      filterPlaceholder="请输入拼音"
      propsAlias={{
        key: 'id',
        label: 'name',
      }}
    />
  )
}