如何在 b-table 中使用 v-select？答案

【问题标题】：how to work with v-select inside b-table?如何在 b-table 中使用 v-select？
【发布时间】：2022-10-23 22:55:01
【问题描述】：

我正在使用 b 表中的 v-select 元素，但是当我将“响应”属性放在我的 b 表中时出现问题。即使我显示选择选项并向我的 b 表添加垂直滚动，它看起来好像 v-select 包含在表中。 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>

Screenshot of the problem

【问题讨论】：

你为什么在 Bootstrap 中使用 Vuetify？为什么不使用 v-simple-table 或 v-data-table？你能澄清你的问题和/或添加一个有效的sn-p吗？
我在问题中添加了我的代码的 sn-p
你能不只是增加下拉列表的 z-index 以使其可见吗？

标签： vue.js vuejs2 vue-component vuetify.js v-select

【解决方案1】：

它导致overflow: scroll 提供响应式道具 b-table，您添加附加道具以将您的选择绑定到 v-app。我找到了一个example。

<v-select
  v-model="item[key]"
  style="width: 130px"
  label="value"
  size="21"
  :reduce="(cod_efecto) => cod_efecto.value"
  :options="cod_efecto"
  attach
>
  <template
    v-slot:selected-option="option"
  >
    {{ option.value }}
  </template>
  <template v-slot:option="option">
    {{ option.value }} -
    {{ option.text }}
  </template>
</v-select>

【讨论】：

【解决方案2】：

使用 append-to-body 道具将选项列表呈现在表格之外。

【讨论】：