当前位置:网站首页>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 不要取同一个值,否则无法生效。
边栏推荐
- 学习开发没有捷径,也几乎不存在带路会学的快一些的情况
- Intelligent home design and development
- MySQL的简单使用(增删改查)
- Nodemcu-esp8266 development (vscode+platformio+arduino framework): Part 3 --blinker_ MIOT_ Light (lighting technology app control + Xiaoai classmate control)
- 应用最广泛的8位单片机当然也是初学者们最容易上手学习的单片机
- 一个可执行的二进制文件包含的不仅仅是机器指令
- Fundamentals of Electronic Technology (III)_ Chapter 2 principle of amplification circuit__ Crystal triode and field effect triode
- There is no specific definition of embedded system
- Implementing distributed lock with redis
- 顺利毕业[2]-学生健康管理系统 功能开发中。。。
猜你喜欢

学历是一张通行证,门票,你有了它,可以踏入更高层次的环境里

NR PUCCH format0 sequence generation and detection mechanism

Exception handling of arm

Happy Dragon Boat Festival—— Zongzi written by canvas~~~~~

Nodemcu-esp8266 development (vscode+platformio+arduino framework): Part 5 --blinker_ MIOT_ MULTI_ Outside (lighting technology app + Xiaoai classmate control socket multiple jacks)

How does the nr-prach receiver detect the relationship between prembleid and Ta

GPIO port details, Hal library operation keys

Code word in NR

How MySQL modifies null to not null

Intelligent home design and development
随机推荐
Assignment to '*' form incompatible pointer type 'linkstack' {aka '*'} problem solving
Convert IP address to int
编程思想比任何都重要,不是比谁多会用几个函数而是比程序的理解
2021-09-26
There is no specific definition of embedded system
Gpiof6, 7, 8 configuration
嵌入式系统没有特别明确的定义
[graduation successful] [1] - tour [Student Management Information System]
Oracle数据库 SQL语句执行计划、语句跟踪与优化实例
STM32 serial port usart1 routine
Blue Bridge Cup for migrant workers majoring in electronic information engineering
[combinatorics] Introduction to Combinatorics (context of combinatorics | skills of combinatorics | thought of combinatorics 1: one-to-one correspondence)
Successful graduation [3]- blog system update...
Learn the contents of 5g toolbox supporting NR through the NR resources provided by MATLAB
Project cost management__ Topic of comprehensive calculation
QT qcombobox QSS style settings
MySQL environment variable configuration
UCI and data multiplexing are transmitted on Pusch (Part 4) --small block lengths
307. Range Sum Query - Mutable
Mysql database underlying foundation column