Saya menggunakan elemen v-select dalam b-table tetapi saya menghadapi masalah apabila saya meletakkan atribut "responsif" ke dalam b-table. Walaupun saya menunjukkan pilihan pilih dan menambah tatal menegak pada b-jadual saya, ia kelihatan seperti v-select disertakan dalam jadual. Ini tidak berlaku dengan komponen 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>
Skrin skrin soalan
Gunakan atribut
append-to-body
untuk memberikan senarai pilihan di luar jadual.Lihat lebih lanjut di sini