b-modal 實作範例

顯示表格資料，頂部有欄位名稱，底部有按鈕列，中間有捲軸

<b-modal scrollable size="xl" id="b-modal-列印託運單" no-close-on-backdrop="true" hide-header-close="true">

            <template #modal-header>

                <b-row style="width:100%">

                    <b-col class="col-2">訂單編號</b-col>

                    <b-col class="col-2">客戶名稱</b-col>

                    <b-col class="col-6">品名</b-col>

                    <b-col class="col-2">商品類別</b-col>

                </b-row>

            </template>

            <div class="d-flex align-items-center" v-for="需列印託運單 in 需列印託運單s" style="padding:0.25em;margin-bottom:0.5em">

                <b-row style="width:100%">

                    <b-col class="col-2">{{需列印託運單.訂單號}}</b-col>

                    <b-col class="col-2">{{需列印託運單.客戶名稱}}</b-col>

                    <b-col class="col-6">{{需列印託運單.品名}}</b-col>

                    <b-col class="col-2">

                        <b-form-select v-model="需列印託運單.商品類別" :options="商品類別s" style=" width: 100%; display: inline-block " value-field="value" text-field="text">

                        </b-form-select>

                    </b-col>

                </b-row>

            </div>

            <template #modal-footer>

                <b-button-group>

                    <b-button variant="light" v-on:click="click取消列印託運單()">取消</b-button>

                    <b-button variant="primary" style="width:6em" v-on:click="click開始列印託運單()">列印</b-button>

                </b-button-group>

            </template>

</b-modal>