搜尋

首頁  >  問答  >  主體

如何在 b-table 中使用 v-select?

我正在 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>

問題截圖

P粉285587590P粉285587590270 天前392

全部回覆(1)我來回復

  • P粉976737101

    P粉9767371012024-03-27 09:02:17

    使用 append-to-body 屬性在表格外呈現選項清單。

    在此處查看更多內容

    #

    回覆
    0
  • 取消回覆