element-ui el-tree 有一个有滚动条浮框的树 文字跟着滚动条走 icon 一直固定在右侧

393 阅读1分钟

父元素上相对定位 要固定的元素绝对定位在表面上右侧 只要是滑动滚动条动态添加left表面上看是固定的看不当出来的

html

<el-tree style="overflow:auto;position:relative" // 父元素
   <div :style="{'left':elemleft}" style="position:absolute; padding: 5px 10px; right: 0;></div>//要固定的元素
</el-tree>    

   

js

data(){
    return{
        parentDom:'',
        scrollDom:'',
        fixDoms:'',
        oldLeft:300,//这是动态left初始值 可以自己看页面来设置
        setTime:'',
        elemleft:''//这是动态的left的总值
    }
},
mounted(){	
    // 如果el-tree出来了 但是fixDoms还是为空 可以加一个setTimeOut 更新元素
     this.parentDom = document.querySelector('.rebutTree')
     this.fixDoms = document.querySelectorAll('.tool-wpe')
     console.log(this.fixDoms)
     this.parentDom.addEventListener('scroll', this.winScroll,false) 
   },
method(){
    winScroll(){
        // 动态设置left的值
        this.elemleft= this.oldLeft + this.parentDom.scrollLeft + 'px'

    }