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
P粉9767371012024-03-27 09:02:17
Use the append-to-body attribute to render the list of options outside the table.