javascript - Handsontable firstrow 错位

Question

我用的是最新的0.24.3版本，还是卡在这个问题上。每次表格呈现时，第一行总是未对齐并隐藏在标题下。

到目前为止，这是我的代码。

$scope.populateTable = function(data){
        var container = document.getElementById('priceSettingContent');
        $scope.hotPricing = new Handsontable(container, {
            data: data ,
            rowHeaders: false,
            colHeaders: ['Article Number','Color','Size','EAN', 'Local Distribution Channel','Published Selling Price',
                    'Suggested Retail Price','Purchase Cost','Currency','Last Update'],
            columnSorting: false,
            contextMenu: false,
            columns: [
                    {
                        data: 'articleNumber',
                        readOnly: true,
                        disableVisualSelection: true
                    },
                    {
                        data: 'colorCode',
                        readOnly: true,
                        disableVisualSelection: true
                    },
                    {
                        data: 'size',
                        readOnly: true,
                        disableVisualSelection: true
                    },
                    {
                        data: 'ean',readOnly:
                        true, disableVisualSelection: true
                    },
                    {
                        data: 'distList',
                        readOnly: true,
                        disableVisualSelection: true
                    },
                    {
                        data: 'publishedSellingPrice',
                        type: 'numeric',
                        format: '0,0.00',
                        language: 'en',
                        validator: $scope.currencyValidator,
                        allowInvalid: false,
                    },
                    {
                        data: 'suggestedRetailPrice',
                        type: 'numeric',
                        format: '0,0.00',
                        language: 'en',
                        validator: $scope.currencyValidator,
                        allowInvalid: false
                    },
                    {
                        data: 'purchaseCost',
                        type: 'numeric',
                        format: '0,0.00',
                        language: 'en',
                        validator: $scope.currencyValidator,
                        allowInvalid: false
                    },
                    {
                        data: 'currencyCode',
                        readOnly: true,
                        disableVisualSelection: true
                    },
                    {
                        data: 'dateModified',
                        readOnly: true,
                        disableVisualSelection: true
                    },
        ]
            renderAllRows: true,
            height: function(){
                return 400;
            },
            stretchH: 'all',
            afterChange: function(change, source){	
                if(source != 'loadData'){
                    $scope.extractData(change);
                }
            },
            afterCreateRow: function(index, amount){
                data.splice(index, amount)
            },
            tableClassName: ['table-hover', 'table-striped','table-responsive'],
            manualColumnResize: true,
            cells: function(row, col, prop) {
                var cellProperties = {};
                if (row === 0, col === 0) {
                    cellProperties.renderer = $scope.articleNameRenderer;
                }
                return cellProperties;
            }
        });
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

每次表格渲染时都会发生这种情况。

Answer 1

它现在可以工作了，在对 css 进行调试和跟踪后，我终于找到了罪魁祸首。我不知道这是否是最好的方法，但我希望遇到同样问题的人可以应用它。打开 handontable 的 css 文件并编辑这部分并添加 max-height。

.ht_clone_top .wtHolder,
.ht_clone_bottom .wtHolder {
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 35px; /* add max height */
}

就是这样!