当前位置:网站首页>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 不要取同一个值,否则无法生效。
边栏推荐
- 学习开发没有捷径,也几乎不存在带路会学的快一些的情况
- The third paper of information system project manager in soft examination
- Blue Bridge Cup for migrant workers majoring in electronic information engineering
- Raspberry pie installation SciPy
- 端午节快乐!—— canvas写的粽子~~~~~
- numpy. Reshape() and resize() functions
- QT qcombobox QSS style settings
- NR PUCCH format0 sequence generation and detection mechanism
- 【男保姆式】教你打开第一个微信小程序
- [Li Kou brush question notes (II)] special skills, module breakthroughs, classification and summary of 45 classic questions, and refinement in continuous consolidation
猜你喜欢
![[male nanny style] teach you to open the first wechat applet](/img/a1/a571609ee846adf75506a88a629906.png)
[male nanny style] teach you to open the first wechat applet

Fundamentals of Electronic Technology (III)_ Integrated operational amplifier and its application__ Basic arithmetic circuit

Electronic product design, MCU development, circuit cloning

Flink learning notes (VIII) multi stream conversion

SCM career development: those who can continue to do it have become great people. If they can't endure it, they will resign or change their careers

没有多少人能够最终把自己的兴趣带到大学毕业上

MySQL Data Definition Language DDL common commands

UCI and data multiplexing are transmitted on Pusch (Part V) -- polar coding

嵌入式系统没有特别明确的定义

Development of fire evacuation system
随机推荐
Stm32-hal library learning, using cubemx to generate program framework
[combinatorics] Introduction to Combinatorics (context of combinatorics | skills of combinatorics | thought of combinatorics 1: one-to-one correspondence)
Process communication - semaphore
自动装箱与拆箱了解吗?原理是什么?
byte alignment
PRACH --- originator
Project cost management__ Cost management technology__ Article 8 performance review
学历是一张通行证,门票,你有了它,可以踏入更高层次的环境里
Leetcode daily question (2090. K radius subarray averages)
Convert IP address to int
2020-08-23
Development of fire evacuation system
SSB Introduction (PbCH and DMRs need to be supplemented)
Runtime.getRuntime().gc() 和 Runtime.getRuntime().runFinalization() 的区别
Nodemcu-esp8266 development (vscode+platformio+arduino framework): Part 5 --blinker_ MIOT_ MULTI_ Outside (lighting technology app + Xiaoai classmate control socket multiple jacks)
Flink learning notes (IX) status programming
內存數據庫究竟是如何發揮內存優勢的?
[CSDN]C1训练题解析_第四部分_Web进阶
[22 graduation season] I'm a graduate yo~
嵌入式本来就很坑,相对于互联网来说那个坑多得简直是难走