How to use v-select with b-table?

Question

I am using a v-select element in a b-table but I have a problem when I put the "responsive" attribute into the b-table. Even if I show the select option and add vertical scrolling to my b-table, it looks like v-select is included in the table. This doesn't happen with the b-select component.

<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>

Screenshot of question

Answer 1

Use the append-to-body attribute to render the list of options outside the table.

See more here