这里我面临一个与 ion-col 相关的问题,我将我的动态数据绑定(bind)到 ion - 行并在 ion-col 中显示数据,这里的表格很大并且正在切断,下面不稳定的宽度是我的鳕鱼
<ion-grid class="contnr">
<ion-row style="" class="grid-head">
<ion-col width-40>
Transaction
</ion-col>
<ion-col width-40>
Count
</ion-col>
<ion-col width-40 >
Overall Gross Amount
</ion-col>
<ion-col width-40 >
Overall Disc
</ion-col>
<ion-col width-40>
Overall Tax
</ion-col >
<ion-col width-40>
Overall ServiceTax
</ion-col>
<ion-col width-40>
Overall Charge
</ion-col>
<ion-col width-40>
Overall Net
</ion-col>
</ion-row>
<ion-row *ngFor="let value of resultData" style="background:#eff0f1" class="cont-rows">
<ion-col width-40>
{{value.TransacType}}
</ion-col>
<ion-col width-40>
{{value.Transactions}}
</ion-col>
<ion-col width-40>
{{value.Count}}
</ion-col>
<ion-col width-40>
{{value.OverallSales}}
</ion-col>
<ion-col width-40>
{{value.Discount}}
</ion-col>
<ion-col width-40>
{{value.OverallTax}}
</ion-col>
<ion-col width-40>
{{value.MandatoryTax}}
</ion-col>
<ion-col width-40>
{{value.ServiceCharge}}
</ion-col>
<ion-col width-40>
{{value.NetAmt}}
</ion-col>
</ion-row>
<ion-row>
<ion-col>
Total
</ion-col>
<ion-col>
{{grossTotal}}
</ion-col>
<ion-col>
{{Nets}}
</ion-col>
</ion-row>
</ion-grid>
这里的问题是表格太长以至于它被切断了,即使我设置了使用 scss 但 col 和 col 数据没有正确对齐
最佳答案
您可以使用 Responsive attributes 轻松完成此操作.
To customize a column's width for all devices and screens, add the col-* attribute. These attributes tell the column to take up * columns out of the available columns.
<ion-grid>
<ion-row>
<ion-col col-4>
1 of 4
</ion-col>
<ion-col col-2>
2 of 4
</ion-col>
<ion-col col-2>
3 of 4
</ion-col>
<ion-col col-4>
4 of 4
</ion-col>
</ion-row>
</ion-grid>
您可以根据 screen breakpoints 来显示/隐藏
列也是。
注意:这里隐藏
md
断点上的所有列。
.scss
@media (min-width: 768px) and (max-width:991px) {
.hidden-md {
display: none;
}
}
.html
<ion-grid>
<ion-row>
<ion-col col-6 class="hidden-md">
1 of 4
</ion-col>
<ion-col col-6 class="hidden-md">
2 of 4
</ion-col>
</ion-row>
</ion-grid>
关于angular - 如何使用 ion-col 响应式设置大型动态表数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46944964/