有没有一种方法在material-ui自动完成选项之间添加分隔符?
我只找到了这个解决方法,但我不认为这是最好的方法:
const options = [
{
label: 'Opt 1',
value: 'OPT1'
},
{
label: 'Divider',
value: 'DIV',
isDivider: true
},
{
label: 'Opt 2',
value: 'OPT2'
},
{
label: 'Opt 3',
value: 'OPT3'
}
];
...
// used to remove the opacity of disabled items (in my case dividers)
autocompleteOption: {
'&[aria-disabled="true"]': {
opacity: 1
}
}
...
<Autocomplete
options={options}
multiple
getOptionLabel={(option) => option.label}
getOptionSelected={(option, value) => isEqual(value, option)}
classes={{
option: classes.autocompleteOption
}}
getOptionDisabled={(option) => option.isDivider}
renderOption={(option) => {
if (option.isDivider) {
return <Divider className={classes.divider} />;
}
return option.label;
}}
...
/>
- 新增 isDivider 选项,用于添加分隔符
- 新增 getOptionDisabled 方法,用于禁用分隔符选项
- 新增一些样式以去除禁用项目(在我的情况下为分隔符)的不透明度
- 新增 renderOption 方法,用于根据 isDivider 属性渲染分隔符
您还有其他想法吗?
感谢您花费宝贵的时间:)