select-v2 el-select-dropdown

### Element UI `select-v2` 和 `el-select-dropdown` 组件使用方法 #### 安装与全局引入 对于基于 Vue 2 的项目，可以采用如下方式来安装并全局引入 `el-select-v2` 组件： ```javascript import ElSelectV2 from 'el-select-v2'; Vue.use(ElSelectV2); ``` 这使得在整个应用程序中可以直接使用增强版的选择器组件[^1]。 #### 自定义样式类名的应用 当需要对 `<el-select>` 下拉菜单应用特定样式时，可以通过设置属性 `popper-class="single-select-loadmore"` 来指定自定义的 CSS 类名称。此操作允许开发者通过查询 `.single-select-loadmore .el-select-dropdown__wrap` 获取到具体的 DOM 对象实例，从而进一步处理或调整其行为[^2]。 #### 解决样式穿透问题 如果遇到某些情况下样式的优先级不够高而导致效果不明显的问题，则可以在项目的 scoped 样式表内利用 `/deep/` 或者更推荐的方式是在非scoped样式标签里直接覆盖原有样式，并适当增加权重如使用 `!important` 关键字确保新设定能够生效: ```css .select-down .el-select-dropdown__item:hover { background-color: #FFF7F7 !important; } ``` 这种方式能有效应对一些难以修改内部组件样式的场景[^3]。 #### 实际案例展示 下面给出一段完整的 HTML 结构以及对应的 JavaScript 初始化逻辑作为例子说明如何配置和初始化带有分页加载功能的多选框控件： ```html <template> <div id="app"> <!-- 使用 popper-class 属性来自定义下拉层 --> <el-select v-model="value" multiple placeholder="请选择" :remote-method="loadOptions" remote filterable clearable @visible-change="handleVisibleChange" class="my-custom-select" popper-class="custom-popper-class"> <el-option v-for="(option, index) in options" :key="index" :label="option.label" :value="option.value"></el-option> </el-select> </div> </template> <script> export default { data() { return { value: [], options: [] }; }, methods: { loadOptions(query) {}, handleVisibleChange(visible) {} } }; </script> <style lang="scss"> /* 非 scoped */ .custom-popper-class{ /* 添加个性化样式 */ } .my-custom-select /deep/ .el-input__inner { border-radius: 0px; } // 更加推荐的做法是将上述深嵌套选择符部分移至全局样式文件中去编写。 </style> ``` 这段代码片段展示了如何创建一个多选输入框，并为其指定了一个特殊的弹窗容器类名为 `custom-popper-class` ，同时也示范了怎样运用深度作用域 (`/deep/`) 修改子元素外观的方法。