laravel - DataTable 标头在模态中不能很好地呈现

Question

我正在与他们一起工作，modals并在他们内部创造Datatables. 但是有一种行为我根本不明白。当我发送数据并创建 DataTable时，有时渲染效果不佳。这是一个关于我的意思的例子。

但问题是，它只发生在我打开模式的 40% 的情况下。我不知道为什么会这样。这是我的模态代码和我的 Vue 函数。

<div class="modal fade" id="detallePresupuestoTransferencia" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg  modal-dialog-centered">
        <div class="modal-content" style="border-radius: 10px;">
            <input id="idDetallePresupuesto" type="hidden">
            <input id="idDetalleTipo" type="hidden">
            <div class="modal-header" style="height: 58px;">
                <button type="button" class="close" data-dismiss="modal"> 
                    <span>&times;</span>
                </button>
                <h3 id="titulo" style="color: #3C8DBC; margin-top: 1px;"><strong>{{ __("Movements") }}</strong></h3>
            </div>
            <div class="modal-body" style="overflow-y:auto;">
                <div class="panel panel-default"> 
                        <div class="panel-heading">
                            <strong>TYPE:
                                <span id="detalleEspecifica"></span>
                                <span id="subtituloT"></span>
                            </strong>
                            <strong style='float:right;'>TYPE2:
                                <span id="tipoT"></span>
                            </strong>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive-lg">
                                <table id="table1" class="table table-bordered table-condensed table-striped nowrap" style="width:100%; table-layout:fixed;">
                                    <thead>
                                        <tr style="background: #B7CEEC;">
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Date")) }}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Amount 1")) }}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Amount 2")) }}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Amount 3")) }}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{!! strtoupper(__("Amount<br>5")) !!}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{!! strtoupper(__("Final<br>Amount")) !!}</th>
                                            <th style="font-size:11px; text-align: center; vertical-align: middle;">{{ strtoupper(__("Final Amount 2")) }}</th>
                                        </tr>
                                    </thead>
                                    <tbody style="text-align: center; vertical-align: middle;">  
                                    </tbody>
                                </table>
                            </div>
                        </div>  
                </div> 
            </div>
        </div>
    </div>
</div>

这是我的 Vue 函数：

var url= '...';
$('#table1').DataTable({
          "scrollX": true,
           "scrollY": 300,
           "ordering": false,
           "scrollCollapse": true,
           "pageLength": 10,
           "bFilter": false,
           "bLengthChange": false,
           "bAutoWidth": false,
           "lengthMenu": [[5,10,25,50,75,100,-1 ],[5,10, 25, 50, 750, "All"]],
           dom:'<"div-longitud col-md-4"l><"div-botones col-md-4 text-center"B><"div-filtrado col-md-4"f>rt<"div-indice col-md-6"i><"div-paginacion col-md-6"p><"clear">',
           language:language.languageDataTables(),
           "ajax": {
                "url": url,
                "type": "POST",
                "data": data
            },
            columns: [
                {data: 'date', "width": "9%"},
                {data: 'amount 1', "width": "9%"},
                {data: 'amount 2', "width": "27%"},
                {data: 'amount 3', "width": "27%"},
                {data: 'amount 4'},
                {data: 'amount 5'},
                {data: 'amount 6}
            ],
            buttons: [{
                extend:    'excelHtml5',
                text:      '<i class="fa fa-file-excel-o"></i>',
                titleAttr: 'Exportar a Excel',
                title: 'MOVEMENTS',
                className: 'btn btn-success btn-xs',
                exportOptions: {
                    columns: [0,1,2,3,4,5,6]
                },
                autoFilter: true
            }],
           destroy:true,
        });

从我的API控制器中，我返回一个像这样的 DataTable 对象（但我认为这与这个问题无关）：

return Datatables::of($data)->make(true);

那么，有人可以告诉我这种行为的原因吗？我做错了什么？

我再说一遍，这只是在我打开模态的 40% 的时候发生，在我打开它的 60% 的时候完全呈现

标签： laravelvue.jsdatatables