Antd下拉多選帶勾選框

這里其實可以借助Antd級聯選擇器Cascader的功能實現

import { Cascader } from 'antd';

//正常而言級聯選擇還存在children屬性，且值為Array格式
//我們只是想單純一列下拉多選帶勾選框，所以把children屬性去掉即可
const options = [
  {
    label: 'test1',
    value: 'test1', 
  },
  {
    label: 'test2',
    value: 'test2',
  },
  {
    label: 'test3',
    value: 'test3',
  },
];

const onChange = (value) => {
  console.log(value);
}

然后直接使用就好了

<Cascader
    style={{ width: 200 }}
    options={options}
    onChange={onChange}
    multiple
    maxTagCount={1}
/>,

效果如下：

 偷雞有一手的~