当前位置:网站首页>The El table horizontal scroll bar is fixed at the bottom of the visual window
The El table horizontal scroll bar is fixed at the bottom of the visual window
2022-04-23 12:54:00 【ZMJ_ QQ】
There is a need , When el-table When the width of exceeds the width of the browser , although el_table A scroll bar appears at the bottom , But each time you need to scroll to the bottom , Can be used el-table Scroll of , It is trouble . So when el_table When the width of exceeds the screen width , To add a horizontal scroll bar at the bottom of the visual range , I found four different methods on the Internet , I tried it all over again , I've posted the original addresses and renderings of the four methods , It's a personal choice , The second one I used myself , Written by a big man .
Method 1、 stay el-table Upper manual Add scroll bar
Link to original el-table Add top scroll bar , The table realizes double scroll bars up and down _MrsTing The blog of -CSDN Blog _el-table Set scroll bar
1、 stay el-table Add a... Above div,div The width of is the same as that of the table .
<div ref="topScroll" class="top-scroll">
<div class="top-scroll-content" :style="{ width: topScrollWidth }"></div>
</div>
<el-table ref="tableRef" :data="list" v-loading.body="listLoading">
</el-table>
For two div Add the style , Inside div Be sure to set the height , If it is not set, the scroll bar will not come out
.top-scroll {
width: 100%;
overflow-x: auto;
}
.top-scroll-content {
/* If the height is not set, the scroll bar will not come out */
height: 1px;
}
2、 Set the initial value of the scroll bar
data(){
return{
topScrollWidth: 0,
tableDom: null,
}
},
methods:{
setScrollWidth() {
// Set the width value of the top rollover bar to the scroll width of the table
this.$nextTick(() => {
this.topScrollWidth = this.$refs.tableRef.bodyWrapper.scrollWidth + 'px';
})
},
getList(){
// After getting the data , Set the width of the top scroll bar
getListPer(data).then(res => {
this.list = res.list;
this.setScrollWidth();
this.listLoading = false;
})
}
}
3、 stay watch Listen for the scroll bar width value in , Realize the synchronization of two scroll bars
watch:{
topScrollWidth: {
// Two scroll bars scroll at the same time
handler(newVal, oldVal) {
// Listen to the scroll bar
this.$nextTick(() => {
this.tableDom = this.$refs.tableRef.bodyWrapper
this.tableDom.addEventListener('scroll', () => {
// The top scroll bar of the form is synchronized with the bottom
let scrollLeft = this.tableDom.scrollLeft
this.$refs.topScroll.scrollTo(scrollLeft, 0);
})
let topScroll = this.$refs.topScroll
topScroll.addEventListener('scroll', () => {
// The scroll bar at the bottom of the form is synchronized with the top
let scrollLeft = this.$refs.topScroll.scrollLeft
this.$refs.tableRef.bodyWrapper.scrollTo(scrollLeft, 0);
})
})
},
deep: true
},
},
4、 Monitor the zoom operation of the browser , And clear the listener when the page is destroyed
mounted() {
this.getList()
// Monitor the zoom operation of the browser
window.addEventListener("resize", () => {
this.setScrollWidth();
})
},
beforeDestroy() {
// Clear listening
window.removeEventListener("resize", () => {
this.setScrollWidth();
})
},
design sketch
Method 2、 Use v-horizontal-scroll
Written by a big man on the Internet , It's really powerful
el-table Idea of bottom suction treatment scheme of horizontal scroll bar - Bili, Bili
Source warehouse address
GitHub - mizuka-wu/el-table-horizontal-scroll: el-table awlays show horizontal-scroller on bottom
install v-horizontal-scroll="'always'"
npm install el-table-horizontal-scroll
Registration instructions
Global registration
import horizontalScroll from 'el-table-horizontal-scroll'
Vue.use(horizontalScroll)
Or register on the page
import horizontalScroll from 'el-table-horizontal-scroll'
export default {
directives: {
horizontalScroll
}
}
stay el-table Add v-horizontal-scroll
have access to always
or hover
,
The default value is hover
, When hovering over a table , The column displays ;
Or you can change it to always, And make the column always show
<el-table :data="data" v-horizontal-scroll="'always'">
</el-table>
design sketch ( I chose this method myself , Personally, I think it is better than other methods )
Method 3:el-table add to max-height value
Link to the original text :element How to make table The horizontal scroll bar of the table is always displayed , Instead of scrolling to the bottom of the table _Creci The blog of -CSDN Blog _element table Roll horizontally
The way is to give el-table Add one max-height value , Dynamically calculate the value when the page is rendered .
<el-table :max-height="maxHeight"></el-table>
mouted(){
this.$nextTick(()=>{
this.maxHeight = window.innerHeight - 300;//300 Is the height of other components in the page except the table
})
}
design sketch
Method 4: Use CSS
Link to the original text :
html:
<div class="table-parent" @contextmenu.prevent.capture>
<el-table :data="excelData" border class="table-box">
</el-table>
</div>
@contextmenu.prevent.capture Block the browser's default right-click behavior , Event modifier capture Add a listener to the element , When an element bubbles , Trigger the element with the modifier first
css:
.table-parent {
position: absolute;
overflow: auto;
}
.table-parent .table-box {
position: relative;
min-width: 1300px;
overflow: auto;
}
take el-table Enlarge the width of , A horizontal scroll bar appears at the bottom of the page , But if el-table The layout above has been written dead , There will be blank space
design sketch :
版权声明
本文为[ZMJ_ QQ]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230616456943.html
边栏推荐
- leetcode-791. 自定义字符串排序
- Plato farm - a game of farm metauniverse with Plato as the goal
- uni-app 原生APP-本地打包集成极光推送(JG-JPUSH)详细教程
- [vulnhub range] - DC2
- Plato Farm-以柏拉图为目标的农场元宇宙游戏
- STM32控制步进电机(ULN2003+28byj)
- 洛谷P5540 [BalkanOI2011] timeismoney | 最小乘积生成树 题解
- 大家帮我看一下这是啥情况,MySQL5.5的。谢了
- Number of nodes of complete binary tree
- Common problems of unity (1)
猜你喜欢
Packet capturing and sorting -- TCP protocol [8]
Object.keys后key值数组乱序的问题
5 free audio material websites, recommended collection
软件测试周刊(第68期):解决棘手问题的最上乘方法是:静观其变,顺水推舟。
Wonderful review | the sixth issue of "source" - open source economy and industrial investment
[Blue Bridge Cup] April 17 provincial competition brushing training (the first three questions)
精度、速度完美平衡,最新图像分割SOTA模型重磅发布!!!
【每日一题】棋盘问题
Calculate the past date and days online, and calculate the number of live days
梳理網絡IP代理的幾大用途
随机推荐
标签与路径
STM32控制步进电机(ULN2003+28byj)
解锁OpenHarmony技术日!年度盛会,即将揭幕!
5 free audio material websites, recommended collection
Labels and paths
Wonderful review | the sixth issue of "source" - open source economy and industrial investment
洛谷P5540 [BalkanOI2011] timeismoney | 最小乘积生成树 题解
4.DRF 权限&访问频率&过滤&排序
98. Error s.e.errormvcautoconfiguration $staticview reported by freemaker framework: cannot render error page for request
box-sizing
AD20补充笔记3—快捷键+持续更新
CVPR 2022&NTIRE 2022|首个用于高光谱图像重建的 Transformer
SSM框架系列——Junit单元测试优化day2-3
Remote sensing image classification and recognition system based on convolutional neural network
box-sizing
SSM框架系列——注解开发day2-2
BUUCTF WEB [BUUCTF 2018]Online Tool
The continuous construction of the Internet industry platform is not only able to collect traffic
uni-app 原生APP-本地打包集成极光推送(JG-JPUSH)详细教程
Introduction to metalama 4 Use fabric to manipulate items or namespaces