当前位置:网站首页>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
边栏推荐
- 软件测试周刊(第68期):解决棘手问题的最上乘方法是:静观其变,顺水推舟。
- STM32 is connected to the motor drive, the DuPont line supplies power, and then the back burning problem
- 梳理網絡IP代理的幾大用途
- unity常见的问题(一)
- Customize the shortcut options in El date picker, and dynamically set the disabled date
- Sort out several uses of network IP agent
- STM32 project transplantation: transplantation between chip projects of different models: Ze to C8
- CVPR 2022&NTIRE 2022|首个用于高光谱图像重建的 Transformer
- 22. 括号生成
- Flash project cross domain interception and DBM database learning [Baotou cultural and creative website development]
猜你喜欢
Kubernetes 入门教程
基于卷积神经网络的遥感影像分类识别系统
Idea的src子文件下无法创建servlet
How to click an object to play an animation
The accuracy and speed are perfectly balanced, and the latest image segmentation SOTA model is released!!!
Plato Farm-以柏拉图为目标的农场元宇宙游戏
Message queuing overview
Date time type in database
Can I take the CPDA data analyst certificate for 0 foundation
[daily question] chessboard question
随机推荐
Web17——EL与JSTL的使用
大家帮我看一下这是啥情况,MySQL5.5的。谢了
How to prevent the website from being hacked and tampered with
如何防止网站被黑客入侵篡改
22. 括号生成
[wechat applet] Z-index is invalid
SSM框架系列——Junit单元测试优化day2-3
uni-app 原生APP-云打包集成极光推送(JG-JPUSH)详细教程
Source code analysis of synchronousqueue
What are the forms of attack and tampering on the home page of the website
STM32 is connected to the motor drive, the DuPont line supplies power, and then the back burning problem
CVPR 2022 & ntire 2022 | the first transformer for hyperspectral image reconstruction
leetcode:437. 路径总和 III【dfs 选还是不选?】
unity常见的问题(一)
Introduction to metalama 4 Use fabric to manipulate items or namespaces
教你快速开发一个 狼人杀微信小程序(附源码)
Remote access to raspberry pie at home (Part 1)
梳理網絡IP代理的幾大用途
uni-app 原生APP-本地打包集成极光推送(JG-JPUSH)详细教程
[csnote] ER diagram