当前位置:网站首页>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 不要取同一个值,否则无法生效。
边栏推荐
- 单片机职业发展:能做下去的都成牛人了,熬不动就辞职或者改行了
- Vector processor 9_ Basic multilevel interconnection network
- [graduation successful] [1] - tour [Student Management Information System]
- [CSDN]C1訓練題解析_第三部分_JS基礎
- Runtime. getRuntime(). GC () and runtime getRuntime(). The difference between runfinalization()
- Education is a pass and ticket. With it, you can step into a higher-level environment
- Getting started with JMX, MBean, mxbean, mbeanserver
- [combinatorics] Introduction to Combinatorics (context of combinatorics | skills of combinatorics | thought of combinatorics 1: one-to-one correspondence)
- UCI and data multiplexing are transmitted on Pusch (Part 4) --small block lengths
- 编程思想比任何都重要,不是比谁多会用几个函数而是比程序的理解
猜你喜欢

uniapp 实现微信小程序全局分享及自定义分享按钮样式

The third paper of information system project manager in soft examination

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

Flink learning notes (VIII) multi stream conversion

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

Flink CDC practice (including practical steps and screenshots)

numpy. Reshape() and resize() functions
![Successful graduation [2] - student health management system function development...](/img/91/72cdea3eb3f61315595330d2c9016d.png)
Successful graduation [2] - student health management system function development...

Error output redirection

Fundamentals of Electronic Technology (III)__ Fundamentals of circuit analysis__ Basic amplifier operating principle
随机推荐
STM32 general timer 1s delay to realize LED flashing
单片机现在可谓是铺天盖地,种类繁多,让开发者们应接不暇
Nr--- Pusch I: sorting out the agreement process
Development of fire evacuation system
How does the memory database give full play to the advantages of memory?
Leetcode daily question (2109. adding spaces to a string)
Nodemcu-esp8266 development (vscode+platformio+arduino framework): Part 4 --blinker_ DHT_ WiFi (lighting technology app control + temperature and humidity data app display)
[CSDN]C1訓練題解析_第三部分_JS基礎
[graduation successful] [1] - tour [Student Management Information System]
Uniapp realizes global sharing of wechat applet and custom sharing button style
嵌入式本来就很坑,相对于互联网来说那个坑多得简直是难走
PRACH --- originator
Epoll read / write mode in LT and et modes
Exception handling of arm
Project cost management__ Plan value_ Earned value_ Relationship among actual cost and Countermeasures
Project cost management__ Topic of comprehensive calculation
Mysql database underlying foundation column
numpy. Reshape() and resize() functions
Raspberry pie installation SciPy
Getting started with JMX, MBean, mxbean, mbeanserver