The el-select style can be modified in either index. HTML or popper-append-to-body plus popper-class

Record, the blogger is very clear, in this record, convenient to find later, thanks to the output of the blogger,

Problem description

The style of the ELme UI is generally enough, but sometimes we need to modify the style to make it more beautiful. In this article, we will record how to modify the style of el-Select, and check back when you forget

The drop-down box can be divided into two parts, one part is the “box” part, the other part is the “drop down” part, usually we modify the drop-down box style, nothing more than to modify these two parts, as shown in the following figure

Modify the width of the box

The easiest way to change the width of the el-select box is to add a style style to the el-select box. Note that setting the height using the style style will not work, nor will setting the height because the height is adaptive and will be extended by the content

The following code

<! < span style="width:400px; V-model ="value" placeholder=" please select "> <el-option V-for ="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select>Copy the code

The renderings are as follows

It does get wider

Modify the drop-down style

Method 1 (global modification in index.html)

As you can see from the image above, the dropdown is not in the DOM of el-Select, but in the outermost element. This outermost element is a sibling of the mount #App element, so we need to change the styling in the index.html file of the vue project entry

The following code

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" Content ="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title> <%= HtmlWebpackPlugin. Options. The title % > < / title > < style > / * find hierarchy can be modified here * /. El - select - dropdown can. El - scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item:hover { background-color: #baf; } </style> </head>Copy the code

The renderings are as follows

IShot2021-06-06 22.34.07. Mov

But changing the style in the index. HTML file will pollute the whole world. If I want to change the style of the dropdown on one page and leave the dropdown on the other page, that’s not a good idea, but if I want to change the style of the dropdown on all the other pages, it’s a good idea. Add down we say that the second kind of way, use that hungry UI provided by el – select the properties of the popper – append – to – the body attribute, official introduction is as follows:

Obviously, ele. me officially adds the drop-down part to the structure by default, so we can use this property to take it out of the body and put it back into the corresponding el-select, which is to put the drop-down part back into the corresponding structure.

Method 2: Popper-append-to-body

<template> <div> <el-select V-model ="value" :popper-append-to-body="false" placeholder=" placeholder "> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> </template>Copy the code

Review the DOM element structure

Now that we have added el-Select, we can use the CSS selector to find the appropriate level to set the style, and still achieve the effect shown above

<style lang="less" scoped>
.el-select {
    .el-select-dropdown {
        .el-scrollbar {
            .el-select-dropdown__wrap {
                .el-scrollbar__view {
                    .el-select-dropdown__item:hover {
                        background-color: #baf;
                    }
                }
            }
        }
    }
}
</style>
Copy the code

supplement

Popper-append-to-body is used with the popper-class. It is not necessary to use the popper-append-to-body with the el-select structure. Poper-class can be used like this:

<el-select V-model ="value" popper-class="setSelect" :popper-append-to-body="false" placeholder=" placeholder "></el-select>Copy the code

Popper-class is the name of the class for the select dropdown. When used together, it makes CSS code simpler

The el-select style can be modified in either index. HTML or popper-append-to-body plus popper-class