当前位置:网站首页>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 不要取同一个值,否则无法生效。
边栏推荐
- Uniapp realizes global sharing of wechat applet and custom sharing button style
- Project scope management__ Scope management plan and scope specification
- MySQL environment variable configuration
- 对于新入行的同学,如果你完全没有接触单片机,建议51单片机入门
- Nr--- Pusch I: sorting out the agreement process
- SSB Introduction (PbCH and DMRs need to be supplemented)
- Stm32f04 clock configuration
- 学历是一张通行证,门票,你有了它,可以踏入更高层次的环境里
- Fundamentals of Electronic Technology (III)__ Chapter 6 combinational logic circuit
- MySQL的简单使用(增删改查)
猜你喜欢
Fundamentals of Electronic Technology (III)_ Chapter 2 principle of amplification circuit__ Crystal triode and field effect triode
Development of fire evacuation system
【男保姆式】教你打开第一个微信小程序
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
UCI and data multiplexing are transmitted on Pusch (Part VI) -- LDPC coding
Definition and use of enum in C language
【順利畢業】[1]-遊覽 [學生管理信息系統]
Hal library sets STM32 clock
新系列单片机还延续了STM32产品家族的低电压和节能两大优势
You need to use MySQL in the opening experiment. How can you forget the basic select statement? Remedy is coming~
随机推荐
STM32 port multiplexing and remapping
The third paper of information system project manager in soft examination
[CSDN] C1 training problem analysis_ Part IV_ Advanced web
Oracle database SQL statement execution plan, statement tracking and optimization instance
单片机现在可谓是铺天盖地,种类繁多,让开发者们应接不暇
I didn't think so much when I was in the field of single chip microcomputer. I just wanted to earn money to support myself first
【顺利毕业】[1]-游览 [学生管理信息系统]
新系列单片机还延续了STM32产品家族的低电压和节能两大优势
UCI and data multiplexing are transmitted on Pusch (Part 4) --small block lengths
Nodemcu-esp8266 development (vscode+platformio+arduino framework): Part 4 --blinker_ DHT_ WiFi (lighting technology app control + temperature and humidity data app display)
Getting started with JMX, MBean, mxbean, mbeanserver
PIP references domestic sources
顺利毕业[2]-学生健康管理系统 功能开发中。。。
Nr--- Pusch I: sorting out the agreement process
Electronic product design
嵌入式本来就很坑,相对于互联网来说那个坑多得简直是难走
Convert IP address to int
嵌入式系统没有特别明确的定义
Hal library sets STM32 clock
Blue Bridge Cup for migrant workers majoring in electronic information engineering