利用修改CSS让iview中table高度100%且带滚动条

iview中的table是不能直接占满父容器的，它的height属性必须设置成一个固定值。假如直接给table设置style为height:100%,它的滚动条会丢失。但是很多时候我们需要table占满父容器，需要表头和页脚进行固定，只让中间数据部分进行滚动。

在CSS中，我们可以使用以下代码来实现：

.iview-table {
  height: 100%;
  overflow: auto;
}

.iview-table-body {
  height: calc(100% - 35px);
}

.iview-table-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.iview-table-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

其中：

• .iview-table是table的样式类，设置height: 100%;overflow: auto;，使table的高度为100%，并添加滚动条。
• .iview-table-body是table body的样式类，设置height: calc(100% - 35px);，使table body的高度为table的高度减去表头和页脚的高度。
• .iview-table-header是table header的样式类，设置position: absolute;top: 0;left: 0;right: 0;z-index: 1;，使table header绝对定位在table的顶部，并固定在页面上。
• .iview-table-footer是table footer的样式类，设置position: absolute;bottom: 0;left: 0;right: 0;z-index: 1;，使table footer绝对定位在table的底部，并固定在页面上。

这样，就可以让iview中的table高度为100%，并且带有滚动条了。

除了修改CSS，我们还可以通过修改iview的源代码来实现这一需求。在iview的源代码中，找到table组件的代码，并将height属性设置为100%，并将overflow属性设置为auto。这样，也可以让iview中的table高度为100%，并且带有滚动条。

以上就是如何修改CSS来实现iview中的table高度100%且带滚动条的方法。希望对大家有所帮助。