el-table 固定前4行
时间: 2024-10-25 13:13:08 浏览: 6
`el-table`是Element UI库中的表格组件,如果你想在其中固定表头的前四行,可以利用`fixed`属性和`index`属性结合使用。`fixed`属性用于设置列是否固定,如果是数组,每一项对应一列的固定状态;`index`属性则表示列的位置。
在Vue模板中,你可以这样做:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="index" width="50" fixed></el-table-column>
<!-- 其他列 -->
<el-table-column prop="name" label="姓名"></el-table-column>
<!-- ... -->
<el-table-column v-for="(column, index) in fixedColumns" :prop="column.prop" :label="column.label" :key="index" :fixed="true" :index="index"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [...], // 你的数据源
fixedColumns: [{ prop: 'index', label: '序号' }, { prop: 'firstColumnToFix', label: '第一固定列' }, { prop: 'secondFixedColumn', label: '第二固定列' }, { prop: 'thirdFixedColumn', label: '第三固定列' }] // 前四列需要固定的配置
};
}
};
</script>
```
这样,前四列会被固定在表格的左侧,随着滚动条移动而保持可见。记得替换`fixedColumns`里的`prop`为你实际的数据字段。
阅读全文