Element UI 表格组件表头固定:实现固定表头一行
要实现 Element UI 中表格组件表头一行固定,可以使用 Element UI 提供的 fixed 属性和 header-row-fixed 属性。
首先,设置表格的 fixed 属性为 true,这将使整个表格固定在容器内。
接下来,为表格的表头行设置 header-row-fixed 属性为 true,这将使表头行固定在表格的顶部。
以下是一个示例代码:
<el-table :data='tableData' :height='200' :fixed-header='true'>
<el-table-column prop='name' label='姓名'></el-table-column>
<el-table-column prop='age' label='年龄'></el-table-column>
<el-table-column prop='address' label='地址'></el-table-column>
</el-table>
在上面的示例中,表格的数据使用 tableData 属性传递,设置了表格的高度为 200px,并且设置了 fixed-header 属性为 true,使整个表格都固定在容器内。每个 el-table-column 表示一个列,其中 prop 属性指定了数据的字段名,label 属性指定了列的标题。
注意:使用 fixed 属性和 header-row-fixed 属性可以使表头行固定在表格的顶部,但是如果表格的内容过长,可能会出现滚动条。如果要同时固定表头和表格内容,请设置表格的 height 属性为一个具体的数值,而不是使用百分比。
原文地址: https://www.cveoy.top/t/topic/qqHV 著作权归作者所有。请勿转载和采集!