src/components/common/VnSelectOption.vue

@@ -0,0 +1,21 @@
+<template>
+    <QItem v-bind="itemProps">
+        <QItemSection>
+            <QItemLabel>{{ getProperty($props.label) }}</QItemLabel>
+            <QItemLabel caption>{{ getProperty($props.caption) }}</QItemLabel>
+        </QItemSection>
+    </QItem>
+</template>
+
+<script setup>
+const $props = defineProps({
+    scope: { type: Object, default: null }, // Propiedades del item
+    label: { type: String, default: null }, // Propiedad a mostrar
+    caption: { type: [String, Function, Object], default: null }, // Propiedad a mostrar como caption,
+});
+const { itemProps, opt } = $props.scope;
+const getProperty = (key, obj = opt) => {
+    if (typeof key == 'function') return key(obj);
+    return key.split('.').reduce((o, i) => (o ? o[i] : undefined), obj);
+};
+</script>

src/pages/Supplier/Card/SupplierBasicData.vue

@@ -5,6 +5,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectOption from 'src/components/common/VnSelectOption.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -45,14 +46,11 @@ const companySizes = [
                         </QIcon>
                     </template>
                     <template #option="scope">
-                        <QItem v-bind="scope.itemProps">
-                            <QItemSection>
-                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                <QItemLabel caption>
-                                    {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
+                        <VnSelectOption
+                            :scope="scope"
+                            label="name"
+                            :caption="(opt) => `${opt?.nickname}, ${opt?.id}`"
+                        ></VnSelectOption>
                     </template>
                 </VnSelect>
                 <VnSelect