在Angular Js项目中,带有Google Material Design的数据表有时会移动列和行。
目前,我还不知道如何完美地重现该错误。 因此,要重现它,我只需刷新Web浏览器并查看,刷新并查看,刷新并查看...
您对这里发生的事情有想法吗? 谢谢。
您可以在下面找到HTML代码:
<md-card>
<md-toolbar class="md-table-toolbar md-default" ng-show="!filter.search && !selectedProducts.length">
<div class="md-toolbar-tools">
<md-button class="md-raised md-accent" style="color:#fff;" disabled>
<span translate>New</span>
</md-button>
<div flex></div>
<md-button class="md-icon-button" ng-click="filter.search = true;">
<md-icon class="material-icons">search</md-icon>
<md-tooltip>
<span translate>Search</span>
</md-tooltip>
</md-button>
<md-button class="md-icon-button" ng-click="load()">
<md-icon class="material-icons">refresh</md-icon>
<md-tooltip>
<span translate>Refresh</span>
</md-tooltip>
</md-button>
</div>
</md-toolbar>
<md-toolbar class="md-table-toolbar md-default" ng-show="filter.search && !selectedProducts.length">
<div class="md-toolbar-tools">
<md-icon>search</md-icon>
<form flex>
<input type="text" name="search" ng-model="search" placeholder="{{ 'Search...' | translate }}">
</form>
<md-button class="md-icon-button" ng-click="filter.search = false" aria-label="close">
<md-icon class="material-icons">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-toolbar class="md-table-toolbar md-accent md-hue-1" ng-show="selectedProducts.length">
<div class="md-toolbar-tools">
<div translate translate-n="selectedProducts.length" translate-plural="{{$count}} selected">1 selected</div>
</div>
</md-toolbar>
<md-table-container>
<table md-table md-progress="promise" md-row-select ng-model="selectedProducts" multiple>
<thead md-head md-order="query.order">
<tr md-row>
<th md-column md-order-by="identifier"><span translate>Product ID</span></th>
<th md-column md-order-by="name"><span translate>Name</span></th>
<th md-column md-order-by="manufacturer"><span translate>Manufacturer</span></th>
<th md-column md-order-by="lastModified" ><span translate>Last modified</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="product" md-select-id="product._id" data-ng-repeat="product in products.data | filter:search | limitTo: query.limit: (query.page - 1) * query.limit | orderBy: query.order" ng-click="read(product._id)">
<td md-cell>[{{product.upiType}}] {{product.identifier}}</td>
<td md-cell>{{product.name}}</td>
<td md-cell>{{product.manufacturer}}</td>
<td md-cell>{{product.lastModified | date:'dd/MM/yyyy'}}</td>
</tr>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="query.limit" md-limit-options="[10, 15, 50, 100]" md-page="query.page" md-total="{{products.count}}"
md-page-select md-label="$parent.label">
</md-table-pagination>
</md-card>