Scroll bar style modification of element-ui table

clipboard.png

the scroll bar style of the default element-ui table is like this, is there any other scroll bar style? How to modify it?

Javascript vue.js element-ui
Jun.12,2021

the scroll bar style has been modified before when using the element-ui table, but there is no official way to change it
later, please refer to

. 
//
.your-table .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
//
.your-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: -sharpa1a3a9;
  border-radius: 3px;
}

if the scroll bar style of the whole page is consistent, directly changing the global scroll bar style can also be effective 

//
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
//
::-webkit-scrollbar-thumb {
  background-color: -sharpa1a3a9;
  border-radius: 3px;
}

there is a compatibility problem with scroll bar styles. The above styles are available in webkit browsers

casually find a scroll bar plug-in and then use the custom command
to complete
I selected perfect-scrollbar (for details on how this plug-in, which is not made for vue, can be used in vue, please see " an article I wrote )
is roughly as follows

. 
import Vue from 'vue';
//
import PerfectScrollbar from 'perfect-scrollbar';
//css
import "perfect-scrollbar/css/perfect-scrollbar.css";

/**
 * @description PerfectScrollbar
 * @param {Element} el - dom
 */
const el_scrollBar = (el) => {
    //_ps_
    if (el._ps_ instanceof PerfectScrollbar) {
        el._ps_.update();
    } else {
        //el
        el._ps_ = new PerfectScrollbar(el, { suppressScrollX: true });
    }
};

Vue.directive("anyNameYouLike",{
    inserted(el, binding){
        const { arg } = binding;
        if(arg === ""){
            el = el.querySelector(".el-table__body-wrapper");
            if(!el){
                return console.warn("classNameel-table__body-wrapperdom");
            }
        }
        const rules = ["fixed", "absolute", "relative"];
            if (!rules.includes(window.getComputedStyle(el, null).position)) {
                console.error(`perfect-scrollbarposition:${rules.join("")}`)
            }
            el_scrollBar(el);
    },
    componentUpdated(el, binding, vnode) {
        const { arg } = binding;
        if (arg === "") {
            el = el.querySelector(".el-table__body-wrapper");
            if(!el){
                return console.warn("classNameel-table__body-wrapperdom");
            }
        }
        vnode.context.$nextTick(
            () => {
                try {
                    el_scrollBar(el);
                } catch (error) {
                    console.error(error);
                }
            }
        )
    },
})

then it's easy for you to use
if it's a normal element 

<div v-anyNameYouLike>
    <!---->
</div>

if it is the table component of ele.me 

<el-table :data="" v-anyNameYouLike:>
    <!---->
</el-table>

is it very simple
effect to stand out

clipboard.png

I guess what you mean is that you want to keep the table header from scrolling, just scroll table-body.
you can deal with it like this:
for example, @ A Snake responder's solution adds a condition. 

const el_scrollBar = (el) => {
    // `.el-table__body-wrapper`Elementui
    const dom = el.querySelector('.el-table__body-wrapper')
    if (dom._ps_ instanceof PerfectScrollbar) {
        dom._ps_.update();
    } else {
        dom._ps_ = new PerfectScrollbar(dom, { suppressScrollX: true });
    }
};

Previous: Is there any way to convert word documents generated by Freemaker into standard word documents?

Next: Click the parent component button to dynamically transfer values to the child component modal box. Will the extensive use of watch in the program affect program performance? Or there are other ways to replace watch?.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu