popper-class不生效

根据你提供的引用内容，关于`popper-class`不生效的问题，有几个可能的原因和解决方法。首先，确保你正确地给`el-popover`添加了特定的类名`popper-class`。其次，确保你没有在样式中使用`scoped`属性，因为`el-popover`与`app.vue`处于同级，直接在页面上修改样式时，该样式无法应用。如果你想为`el-popover`添加样式，可以在组件外部包裹一个`div`并给其设置一个类名，然后在样式中通过`.el-popover.menu_popover`的方式进行修改。另外，注意在样式中不要加上`lang='scss'`，并且`.el-popover`和`.menu_popover`之间不能有空格。

另外，如果以上方法都不起作用，可能是由于其他全局样式的覆盖或者`el-popover`并不是直接放在`el-select`里面。在这种情况下，你可以通过使用更具体的选择器来覆盖全局样式，例如使用`.el-popover.menu_popover`的方式来修改样式。

如果问题仍然存在，我建议你查看官方文档或者在相关论坛或社区中咨询其他开发者，以获取更具体的解决方法。

相关问题

根据popper-class 修改下拉框的高度 写入css 为什么不生效呢

可能是因为您的 CSS 代码没有正确地应用到下拉框元素上。请检查以下几个方面：

1. 确认您的 CSS 代码与下拉框元素的选择器匹配。例如，如果您的下拉框元素的 class 是 "dropdown"，那么您需要使用 ".dropdown" 作为选择器。

2. 确认您的 CSS 代码的优先级高于其他样式规则。可以使用 !important 关键字来提高代码的优先级，但是应该尽量避免过度使用。

3. 确认您的 CSS 代码没有被其他样式规则覆盖。这可能需要对样式表进行仔细的排查和调试。

以下是一个可能会生效的 CSS 代码示例，仅供参考：

.dropdown-menu {
  max-height: 200px !important;
  overflow-y: auto !important;
}

el-autocomplete change不生效

根据引用\[1\]，el-autocomplete是一个HTML组件，用于创建一个自动完成的输入框。根据引用\[2\]，可以通过在el-autocomplete上添加属性popper-append-to-body="false"来解决change事件不生效的问题。这个属性的作用是将渲染后的元素放入#app元素中。代码示例如下：

<el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" style="width: 300px" :popper-append-to-body="false"></el-autocomplete>

然而，根据引用\[3\]的描述，将popper-append-to-body属性设置为false解决了change事件不生效的问题，但是导致了原本设置的下拉框的内边距失效。为了解决这个问题，可以使用popper-class属性。popper-class属性用于设置下拉列表的类名。在组件中加入popper-class="acc-search"，可以将自定义的CSS样式应用于下拉列表。代码示例如下：

<el-autocomplete class="voucher-subject-input" :ref="'inputcredit_2_'+index" :popper-append-to-body="true" popper-class="acc-search" :class="{ 'subject-opacity': voucher.items\[index\].showText }" v-model="voucher.items\[index\].subjectName" value-key="name" :fetch-suggestions="querySearch" :highlight-first-item="true" @blur="handleSelectBlur(voucher.items\[index\],index)" @select="handleSelectSubject($event,index)" @focus="handleFocusSubject($event,index)">
  <template slot-scope="{ item }">
    <el-button v-if="item.is_add" type="primary" plain style="width: 100%;position: absolute;bottom: 0px;left: 0px;" class="add-button" @click="accAddBtn()">添加</el-button>
  </template>
</el-autocomplete>

通过以上的修改，你应该能够解决el-autocomplete change事件不生效的问题，并且保持下拉框的内边距生效。
#### 引用[.reference_title]
- *1* [vue组件之el-tree、el-select、el-autocomplete、el-table篇](https://blog.csdn.net/qq_43977829/article/details/124166369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [el-autocomplete修改默认样式 不生效问题（已解决）](https://blog.csdn.net/Maxueyingying/article/details/121373387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [【关于Element UI中el-autocomplete组件】二、el-autocomplete组件解决@blur与@select事件冲突](https://blog.csdn.net/XujiRe/article/details/125413153)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]