vue table左右滑动的时候第一列固定
时间: 2023-07-04 15:30:33 浏览: 82
您好!针对您的问题,我可以给您提供一种实现方式。可以考虑使用element-ui的el-table组件,结合CSS和JavaScript来实现固定第一列且可左右滑动的表格。具体实现步骤如下:
1.将el-table的第一列使用fixed属性设置为固定列。
2.为el-table添加一个包裹容器,设置其overflow-x属性为auto,使其可以水平滚动。
3.使用JavaScript监听包裹容器的scroll事件,获取其水平滚动距离,然后将固定列的位置设置为固定不变,同时设置其left值为包裹容器的滚动距离的相反数。
以下是代码示例:
```html
<template>
<div class="table-wrapper" ref="tableWrapper">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" fixed></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
...
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
...
]
}
},
mounted() {
this.$nextTick(() => {
const tableWrapper = this.$refs.tableWrapper
tableWrapper.addEventListener('scroll', this.handleScroll)
})
},
beforeDestroy() {
const tableWrapper = this.$refs.tableWrapper
tableWrapper.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
const tableWrapper = this.$refs.tableWrapper
const fixedColumnEl = tableWrapper.querySelector('.el-table__fixed')
fixedColumnEl.style.left = `-${tableWrapper.scrollLeft}px`
}
}
}
</script>
<style>
.table-wrapper {
overflow-x: auto;
}
</style>
```
以上就是一个简单的固定第一列且可左右滑动的el-table表格的实现方式,希望对您有所帮助!