- 首页表格的宽度要大于容器的宽度, 出现滚动条,
- 加一个滚动条的事件 @scroll="handleScroll"
- 在第3列上加动态的 fixed
<el-table :data="tableData" style="width: 100%" @scroll="handleScroll" ref="achievementsTable>
<el-table-column prop="date" label="姓名" width="180"></el-table-column>
<el-table-column prop="date" label="年龄" width="180"></el-table-column>
<el-table-column prop="date" label="性别" width="180" :fixed="isFixed ? 'left' : false"></el-table-column>
<el-table-column prop="date" label="身高" width="180"></el-table-column>
<el-table-column prop="date" label="体重" width="180"></el-table-column>
<el-table-column prop="date" label="地址" width="180"></el-table-column>
</el-table>
......
data() {
return {
isFixed: false
}
}
- 监听handleScroll 事件
mounted() {
// 监听 el-table 内部 body-wrapper 的滚动事件
const bodyWrapper = this.$refs.achievementsTable.$el.querySelector(".el-table__body-wrapper");
if (bodyWrapper) {
bodyWrapper.addEventListener("scroll", this.handleScroll);
}
},
beforeDestroy() {
// 组件销毁时移除事件监听
const bodyWrapper = this.$refs.achievementsTable.$el.querySelector(".el-table__body-wrapper");
if (bodyWrapper) {
bodyWrapper.removeEventListener("scroll", this.handleScroll);
}
},
- handleScroll事件判断滚动条位置 是否到达第3列,更改isFixed的值
handleScroll(event) {
const scrollLeft = event.target.scrollLeft ;
const table = this.$refs.achievementsTable;
const columns = table.$el.querySelectorAll(".el-table__header th");
const fourthColumn = columns[2];
if (fourthColumn) {
const fourthColumnLeft = fourthColumn.offsetLeft; // 第3列的左侧位置
// 如果滚动距离超过第4列的位置,则固定
this.isFixed = scrollLeft > fourthColumnLeft;
this.$nextTick(() => {
// 手动调用 doLayout 重新计算布局
this.$refs.achievementsTable.doLayout();
});
}
},
注意:
this.$refs.achievementsTable.doLayout(); 这句代码一定要加, 不然会有闪烁的情况
如果 在位置方面你感觉有点差异, 比如 还没到位置,就固定了, 或者 超过了位置 才固定,
可 在 const scrollLeft = event.target.scrollLeft ; 这段代码上进行调整
如:const scrollLeft = event.target.scrollLeft + 30
const scrollLeft = event.target.scrollLeft + 124 等