el-table 固定列
时间: 2024-05-08 12:12:24 浏览: 107
【JavaScript源代码】el-table表头根据内容自适应完美解决表头错位和固定列错位.docx
el-table 是 Element UI 中的一个表格组件,用于展示数据。固定列是指在表格中某些列可以固定在左侧或右侧,不随滚动条滚动而移动。
要实现 el-table 的固定列,可以通过设置表格的 fixed 属性来实现。具体步骤如下:
1. 在 el-table 中设置 fixed 属性为 left 或 right,表示要固定在左侧或右侧的列。
例如:
```
<el-table :data="tableData">
<el-table-column fixed="left" prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column fixed="right" prop="address" label="地址"></el-table-column>
</el-table>
```
2. 设置固定列后,表格会自动根据内容和容器的宽度进行调整,如果内容过长会自动显示省略号。
3. 如果需要固定多列,可以给多个 el-table-column 设置 fixed 属性。
4. 如果需要取消固定列,可以将 fixed 属性设置为空字符串。
例如:
```
<el-table :data="tableData">
<el-table-column fixed="" prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column fixed="" prop="address" label="地址"></el-table-column>
</el-table>
```
阅读全文