业务需要支持选择和自定义输入,百度了一圈找到一些思路,这里主要有一个坑的点是AutoComplete组件不像Select组件一样有label和value,它只有value属性。
效果图如下:
代码如下:
我的options结构,记得把displayName映射为label
options = [
{
displayName: '2',
value: '22027',
},
{
displayName: '4',
value: '22029',
},
{
displayName: '6',
value: '22032',
},
{
displayName: '8',
value: '27436',
},
{
displayName: '10',
value: '27438',
},
{
displayName: '12',
value: '3234583',
},
{
displayName: '14',
value: '3241261',
},
{
displayName: '16',
value: '3250796',
},
{
displayName: '14w',
value: '3649485',
},
{
displayName: '16W',
value: '4140646',
},
{
displayName: '18W',
value: '4043547',
},
{
displayName: '20W',
value: '3295553',
},
{
displayName: '22W',
value: '5332895',
},
{
displayName: '24W',
value: '8361230',
},
{
displayName: '26W',
value: '10284785',
},
{
displayName: '28W',
value: '12785202',
},
{
displayName: 'other',
value: '-1',
},
]
value的格式
attrValues = [
{
attrValueId: '3285248',
attrValue: 'illusion',
},
{
attrValueId: '3288205',
attrValue: 'Vintage',
},
{
attrValueId: '3357888',
attrValue: 'simple',
},
{
attrValueId: -3,
attrValue: 'other3',
},
{
attrValueId: -4,
attrValue: 'other4',
},
],