sticky 英文字面意思是粘,粘贴,所以姑且称之为粘性定位 。我们先看下在Angular中如何使用。
当我们需要固定住头部的时候,只需要在mat-header-row 加上 sticky: true,如下图:
效果图
但是在我们实际开发中,想要的效果远不止于此。除了固定整个头部外,随着数据的增多,我们表格的列可能也会增多,表格的底部也会出现滚动条。当我们向右拉滚动条的时候,需要固定第一列的数据,同样,我们在第一列的位置加上sticky的属性,如下图:
效果图
我们会发现,第一列虽然是固定住了,但没有明显的界限,很容易在视觉上混淆。此时,我们可以通过监测滚动条的位置,来添加阴影的样式,如下图:
效果图
注意:
在material table 组件中, border-collapse属性 默认是 separate ,我们在开发中可能用到其他的组件库,比如bootstrap,而bootstrap中table默认的是 collapse ,并且权重要比material table要高,就会影响到阴影的显示。** *注: border-collapse 属性设置表格的边框是否被合并为一个单一的边框,separate: 边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse : 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。*
演示图: