需求：增加顶部滚动条，方便查看表格里面隐藏在后面的数据
1. el-table(elment-ui) 的实现方法
- table表格上面添加一个div,外层设置为100%，内层div(内容区域)设置为table内容宽度
<!-- 顶部滚动条 -->
<div ref="topScroll" class="top-scroll">
<div class="top-scroll-content" :style="{ width: topScrollWidth }"></div>
</div>
<!-- table区域 -->
<el-table
:data="list"
empty-text="暂无数据"
style="width: 100%"
ref="tableRef"
>
.....
</el-table>
- 顶部div设置样式，里面的div一定要设置高度，不设置的话滚动条出不来
.top-scroll {
width: 100%;
overflow-x: auto;
}
.top-scroll-content {
/* 高度不设置的话滚动条出不来 */
height: 1px;
}
- 滚动条数据设置
data(){
return{
topScrollWidth: 0,
tableDom: null,
}
},
methods:{
// 该方法在获取列表数据后调用
setScrollWidth() {
//设置顶部滚顶条宽度值为表格的滚动宽度
this.$nextTick(() => {
this.topScrollWidth = this.$refs.tableRef.bodyWrapper.scrollWidth + 'px';
})
},
getTable(){
//在获取数据后，设置顶部滚动条的宽度
getAllData(data).then(res => {
this.data = res.list;
this.setScrollWidth();
})
}
}
- 监听滚动条的宽度，实现上下两个滚动条同步
watch:{
topScrollWidth: {
// 两个滚动条同时滚动
handler(newVal, oldVal) {
// 监听滚动条
this.$nextTick(() => {
this.tableDom = this.$refs.tableRef.bodyWrapper
this.tableDom.addEventListener('scroll', () => {
// 表格顶部滚动条与底部同步
let scrollLeft = this.tableDom.scrollLeft
this.$refs.topScroll.scrollTo(scrollLeft, 0);
})
let topScroll = this.$refs.topScroll
topScroll.addEventListener('scroll', () => {
// 表格底部滚动条与顶部同步
let scrollLeft = topScroll.scrollLeft
this.tableDom.scrollTo(scrollLeft, 0);
})
})
},
deep: true
},
}
- 效果图
2. Table(iview) 的实现方法
- table表格上面添加一个div
<!-- 顶部滚动条 -->
<div ref="topScroll" class="top-scroll">
<div class="top-scroll-content" :style="{ width: topScrollWidth }"></div>
</div>
<!-- table区域 -->
<el-table
:data="list"
empty-text="暂无数据"
style="width: 100%"
ref="tableRef"
>
.....
</el-table>
- 顶部div设置样式
.top-scroll {
width: 100%;
overflow-x: auto;
}
.top-scroll-content {
/* 高度不设置的话滚动条出不来 */
height: 1px;
}
- 滚动条数据设置
data(){
return{
topScrollWidth: 0,
tableDom: null,
}
},
methods:{
// 该方法在获取列表数据后调用
setScrollWidth() {
//设置顶部滚顶条宽度值为表格的滚动宽度
this.$nextTick(() => {
// 这里获取的dom (document.querySelector('.ivu-table-body table'))是表格内容区域
this.topScrollWidth = document.querySelector('.ivu-table-body table').scrollWidth + 'px'
})
},
getTable(){
//在获取数据后，设置顶部滚动条的宽度
getAllData(data).then(res => {
this.data = res.list;
this.setScrollWidth();
})
}
}
- 监听滚动条的宽度，实现上下两个滚动条同步
watch: {
topScrollWidth: {
// 两个滚动条同时滚动
handler(newVal, oldVal) {
this.$nextTick(() => {
this.tableDom = document.querySelector('.ivu-table-body')
this.tableDom.addEventListener('scroll', () => {
// 表格顶部滚动条与底部同步
let scrollLeft = this.tableDom.scrollLeft
this.$refs.topScroll.scrollTo(scrollLeft, 0);
})
let topScroll = this.$refs.topScroll
topScroll.addEventListener('scroll', () => {
// 表格底部滚动条与顶部同步
let scrollLeft = topScroll.scrollLeft
this.tableDom.scrollTo(scrollLeft, 0);
})
})
},
deep: true,
},
},
- 效果图
