当前位置:网站首页>el-table X轴方向(横向)滚动条默认滑到右边
el-table X轴方向(横向)滚动条默认滑到右边
2022-07-03 09:16:00 【京城落灬烟雨】
最近遇到一个比较奇怪的需求,就是当一个table数据过多时,必然会出现横向的滚动条,而默认是靠近最左边的,现在呢我们需要它默认是滑到右边的,为此付出了很多努力加上自己的思考终于实现了需求,两种方法仅供参考:
需求:
很简单的el-table 左边两列el-table-column加了 fixed固定在左侧,滑动滚动条看后边的内容,现在实现初始化就给他滑到右边来。
方法1: 给el-table 加 ref='tableList' 属性,修改它的原生属性 bodyWrapper 里面 的scrollLeft 值,切记要放到this.$nextTick 里。并且给他加上 setTimeout ,不然会有dom渲染的问题,导致无法附上值。
mounted() {
this.$nextTick(()=>{
//先获取到 该表格的宽度
var widthKK =this.$refs.tableList.bodyWidth
//解决 scrollLeft 值赋不上值的问题
setTimeout(()=>{
this.$refs.tableList.bodyWrapper.scrollLeft=Number(widthKK.replace('px',''))
},1000)//必须是1000以上 才能生效
})
},
注意:这里一定要加 setTimeout 而且必须设置1s以上,否则无法生效。
方法2:不使用vue的ref,直接操作js获取它的元素直接改变它的scrollLeft值。
mounted() {
this.$nextTick(()=>{
var widthKK =this.$refs.tableList.bodyWidth
//解决 scrollLeft 值赋不上值的问题
setTimeout(()=>{
document.getElementsByClassName("el-table__body-wrapper")[0].scrollLeft=Number(this.widthKK.replace('px',''))
},1000)//必须是1000以上 才能生效
})
},
注意:该方法会获取到页面所有是el-table__body-wrapper 的元素,如果你的页面有多个表格注意适当取它的下标。
最后:如果页面有多个表格,而且你用第一种方法时,建议使用 ref 不要取同一个值,否则无法生效。
边栏推荐
- Fundamentals of Electronic Technology (III)__ Fundamentals of circuit analysis__ Basic amplifier operating principle
- 万字手撕七大排序(代码+动图演示)
- Assignment to '*' form incompatible pointer type 'linkstack' {aka '*'} problem solving
- Getting started with JMX, MBean, mxbean, mbeanserver
- 内存数据库究竟是如何发挥内存优势的?
- UCI and data multiplexing are transmitted on Pusch (Part 4) --small block lengths
- The third paper of information system project manager in soft examination
- Chromium Embedded Framework (CEF) 介绍
- Quelle langue choisir pour programmer un micro - ordinateur à puce unique
- Nr-prach: access scenario and access process
猜你喜欢
Difference of EOF
[CSDN]C1训练题解析_第四部分_Web进阶
要选择那种语言为单片机编写程序呢
MySQL Data Definition Language DDL common commands
STM32 serial communication principle
NR PUCCH format0 sequence generation and detection mechanism
STM32 port multiplexing and remapping
手机都算是单片机的一种,只不过它用的硬件不是51的芯片
Oracle database SQL statement execution plan, statement tracking and optimization instance
[csdn] C1 analyse des questions de formation Partie III Bar _ JS Foundation
随机推荐
2020-08-23
All processes of top ten management in project management
[successful graduation] [1] - visit [student management information system]
SSB Introduction (PbCH and DMRs need to be supplemented)
Schematic diagram and connection method of six pin self-locking switch
Seven sorting of ten thousand words by hand (code + dynamic diagram demonstration)
Stm32f407 key interrupt
Flink learning notes (VIII) multi stream conversion
numpy. Reshape() and resize() functions
Nodemcu-esp8266 development (vscode+platformio+arduino framework): Part 4 --blinker_ DHT_ WiFi (lighting technology app control + temperature and humidity data app display)
编程思想比任何都重要,不是比谁多会用几个函数而是比程序的理解
单片机职业发展:能做下去的都成牛人了,熬不动就辞职或者改行了
Fundamentals of Electronic Technology (III)__ Logic gate symbols in Chapter 5
端午节快乐!—— canvas写的粽子~~~~~
【力扣刷题笔记(二)】特别技巧,模块突破,45道经典题目分类总结,在不断巩固中精进
Matlab reads hexadecimal numbers and converts them into signed short
Nr-prach:prach format and time-frequency domain
CEF下载,编译工程
STM32 port multiplexing and remapping
Exception handling of arm