Comment utiliser v-select avec b-table ?
P粉285587590
P粉285587590 2024-03-26 14:42:22
0
1
312

J'utilise un élément v-select dans une table b mais j'ai un problème lorsque je mets l'attribut "responsive" dans la table b. Même si j'affiche l'option de sélection et ajoute un défilement vertical à ma table b, il semble que v-select soit inclus dans la table. Cela ne se produit pas avec le composant b-select.

<b-row>
            <b-col sm="12">
                <b-table
                    responsive
                    select-mode="range"
                    :items="pago_cobro.detalle_operacion"
                    :fields="fieldsDetalle"
                    >
                    <template
                        v-slot:cell(det_pago_desc)="{
                            item,
                            field: { key },
                        }"
                    >
                        <div style="width: 150px">
                            {{item[key]}}
                        </div>
                    </template>
                    <template
                        v-slot:cell(det_codigo_efecto)="{
                            item,
                            field: { key },
                        }"
                    >
                        <v-select
                            v-model="item[key]"
                            style="width: 130px"
                            label="value"
                            size="21"
                            :reduce="(cod_efecto) => cod_efecto.value"
                            :options="cod_efecto"
                        >
                            <template
                                v-slot:selected-option="option"
                            >
                                {{ option.value }}
                            </template>
                            <template v-slot:option="option">
                                {{ option.value }} -
                                {{ option.text }}
                            </template>
                        </v-select>
                    </template>
                    <template
                        v-slot:cell(det_moneda)="{
                            item,
                            field: { key },
                        }"
                    >
                        <b-form-select
                            v-model="item[key]"
                            style="width: 80px;"
                            @change="changeMoneda(item)"
                            :options="monedas"
                        />
                    </template> 
                    <template
                        v-slot:cell(det_id_cta)="{
                            item,
                            field: { key }
                        }"
                    >
                        <v-select
                            v-model="item[key]"
                            style="width: 130px;"
                            label="plc_codigo"
                            size="21"
                            :reduce="(cuentas) => cuentas.id"
                            :options="cuentas"
                            @input="changeCtaContable(item,$event)"
                        >
                            <template
                                v-slot:selected-option="option"
                            >
                                {{ option.plc_codigo }}
                            </template>
                            <template v-slot:option="option">
                                {{ option.plc_codigo }} -
                                {{ option.plc_descripcion }}
                            </template>
                        </v-select>
                    </template>
                    <template
                        v-slot:cell(det_banco)="{
                            item,
                            field: { key },
                        }"
                    >
                        <b-form-select
                            v-model="item[key]"
                            style="width: 150px;"
                            :options="bancos"
                            :disabled="item.det_anexo!='BANCO'"
                        />
                    </template>                
                    <template
                        v-slot:cell(det_pago)="{
                            item,
                            field: { key },index
                        }"
                    >
                        <v-select
                            v-model="item[key]"
                            style="width: 130px"
                            label="value"
                            size="21"
                            :reduce="(medio_pagos) => medio_pagos.value"
                            :options="medio_pagos"
                            @input="changePago(item,index,$event)"
                        >
                            <template
                                v-slot:selected-option="option"
                            >
                                {{ option.value }}
                            </template>
                            <template v-slot:option="option">
                                {{ option.value }} -
                                {{ option.text }}
                            </template>
                        </v-select>
                    </template>
                    <template
                        v-slot:cell(det_nro_doc)="{
                            item,
                            field: { key },
                        }"
                    >
                        <b-input-group>
                            <b-form-input
                                v-model="item[key]"
                                style="width: 150px"
                                @keypress="onlyNumbers($event)"                                   
                            />                                
                        </b-input-group>
                    </template>
                    <template
                        v-slot:cell(det_monto)="{
                            item,
                            field: { key },
                        }"
                    >
                        <b-input-group>
                            <b-form-input
                                v-model="item[key]"
                                style="width: 100px"
                                @keypress="onlyNumbers($event)"
                                @keyup="sumaTotal()"                                 
                            />                                
                        </b-input-group>
                    </template>                                                             
                    <template #cell(actions)="row">
                        <b-button
                            size="sm"
                            class="btn-danger mr-1"
                            @click="deleteItem(row)"
                        >
                            <feather-icon icon="TrashIcon" />
                        </b-button>
                    </template>                         
                </b-table>                        
            </b-col>
        </b-row>

Capture d'écran de la question

P粉285587590
P粉285587590

répondre à tous(1)
P粉976737101

Utilisez l'attribut append-to-body pour afficher une liste d'options en dehors du tableau.

Voir plus ici

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!