Customize data inside n-select

[BossHogg97]

Hi, i'm working on Vue3 with NaiveUI. I'd like to customize the data loaded inside n-select using disabled and color property like this: The photo above is an example from NaiveUI doc.

I'm loading data inside schema in this way:

const commonPath = schemaFactory.value.definitions.catalogStand.properties.catalogData

// Data loading
    for (let i = 0; i < resultStands.length; i++) {
      commonPath.enum[i + 1] = resultStands[i].id
      commonPath.enumNames[i + 1] = resultStands[i].name
    }

resultStand contains all the data retrieved from microservice.

Is there any way to add ui properties to certain element of dropdown?

Thanks!

[lljj-x]

Refer to the navie ui Select component SelectOption Properties

[lljj-x]

{
"ui:widget": "SelectWidget",
"ui:enumOptions": [
  ...navieSelectOptions
]
}

https://form.lljj.me/v3/#/demo?ui=VueNaiveForm&type=Test&schema={%22title%22:%22%E6%B5%8B%E8%AF%95%E4%B8%93%E7%94%A8%E9%A1%B5%22,%22type%22:%22object%22,%22description%22:%22%E8%BE%93%E5%85%A5%E4%BD%A0%E7%9A%84Schema%EF%BC%8C%E9%A1%B6%E9%83%A8%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE%E5%8D%B3%E5%8F%AF%E5%BF%AB%E9%80%9F%E7%94%9F%E6%88%90%E9%93%BE%E6%8E%A5%22,%22properties%22:{%22selectWidgetOptions%22:{%22title%22:%22Custom+select+widget+with+options%22,%22type%22:%22string%22,%22ui:widget%22:%22SelectWidget%22,%22ui:enumOptions%22:[{%22label%22:%22label%22,%22value%22:%22label%22,%22disabled%22:true},{%22label%22:%22label1%22,%22value%22:%22label1%22,%22style%22:{%22color%22:%22red%22}},{%22label%22:%22label2%22,%22value%22:%22label2%22}]}}}&formData={%22selectWidgetOptions%22:%22label1%22}&uiSchema={}&errorSchema={}&formFooter={%22show%22:true}&formProps={%22inline%22:false,%22labelPosition%22:%22top%22,%22inlineFooter%22:false,%22layoutColumn%22:1,%22labelWidth%22:%22100px%22}

[BossHogg97]

I'll try as soon as possible and i'll give you a feedback. Thanks

[BossHogg97]

I tried and is working fine. Thanks you so much for your amazing support!