当前位置:网站首页>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 不要取同一个值,否则无法生效。
边栏推荐
- STM32 interrupt switch
- Fundamentals of Electronic Technology (III)__ Logic gate symbols in Chapter 5
- Shell logic case
- 单片机职业发展:能做下去的都成牛人了,熬不动就辞职或者改行了
- 2021-09-26
- 单片机学到什么程度能找到工作,这个标准不好量化
- GPIO port details, Hal library operation keys
- MySQL的简单使用(增删改查)
- Assignment to '*' form incompatible pointer type 'linkstack' {aka '*'} problem solving
- Install local sources using yum
猜你喜欢

Quelle langue choisir pour programmer un micro - ordinateur à puce unique

There is no specific definition of embedded system

CEF下载,编译工程
![【顺利毕业】[1]-游览 [学生管理信息系统]](/img/91/72cdea3eb3f61315595330d2c9016d.png)
【顺利毕业】[1]-游览 [学生管理信息系统]

Error output redirection

Seven sorting of ten thousand words by hand (code + dynamic diagram demonstration)

Fundamentals of Electronic Technology (III)__ Chapter 1 resistance of parallel circuit

Definition and use of enum in C language

Assignment to '*' form incompatible pointer type 'linkstack' {aka '*'} problem solving

Stm32f407 key interrupt
随机推荐
Simple use of MySQL (addition, deletion, modification and query)
STM32 interrupt switch
[csdn] C1 analyse des questions de formation Partie III Bar _ JS Foundation
Nr-prach:prach format and time-frequency domain
Leetcode daily question (931. minimum falling path sum)
Leetcode daily question (1024. video sticking)
Runtime. getRuntime(). GC () and runtime getRuntime(). The difference between runfinalization()
对于新入行的同学,如果你完全没有接触单片机,建议51单片机入门
C language enumeration type
Oracle database SQL statement execution plan, statement tracking and optimization instance
手机都算是单片机的一种,只不过它用的硬件不是51的芯片
Gpiof6, 7, 8 configuration
A lottery like scissors, stone and cloth (C language)
In third tier cities and counties, it is difficult to get 10K after graduation
Nodemcu-esp8266 development (vscode+platformio+arduino framework): Part 3 --blinker_ MIOT_ Light (lighting technology app control + Xiaoai classmate control)
Nr--- Pusch I: sorting out the agreement process
Nodemcu-esp8266 development (vscode+platformio+arduino framework): Part 4 --blinker_ DHT_ WiFi (lighting technology app control + temperature and humidity data app display)
Raspberry pie installation SciPy
UCI and data multiplexing are transmitted on Pusch - placement of data and UCI positions (Part III)
Stm32-hal library learning, using cubemx to generate program framework