实现Dropdown下拉菜单中分页

前言；本文主要是记录一下问题解决方式。

先来说一下Dropdown下拉菜单的交互效果，就是鼠标click/hover展示菜单内容，当鼠标滑过，菜单就消失，这样当我们想点击分页的时候，使用传统的elementui分页组件如果在菜单的最底部，分页下拉框已经超出菜单内容体，这下就没法点击了。如下图~

下面来说一下解决方式

1. 因为需求上只需要鼠标滑到固定按钮，展示菜单内容，滑过菜单内容，菜单消失，于是我是用mouseover和mouseleave两个事件来控制菜单内容的展示和隐藏。
2. 要实现菜单中分页，如果自己写一个分页组件稍微有点麻烦。所以还是使用了elementui中的pagination分页组件，但是问题的重点是下拉框！我们为什么会在下拉框选择的时候，让菜单消失呢，说明弹出框内容已经不属于菜单内容啦。看官方文档的时候，突然发现select组件有一个popper-append-to-body属性。如果把这个属性设置为false，是不是说明弹出框不会属于body，而属于我们的菜单页，这样我在自己的区域操作，总不会让惨淡内容消失了吧。 
3. 带着这样的猜想，去实践一下，使用分页组件pagination的时候，不展示页数设置，只展示页码操作，我们在手动加一个select组件去实现页数的设置。代码如下~

4.  <el-pagination            popper-class="page"            background            @current-change="hanleCurrentChange"            :page-size="pageSize"            :current-page="currentPage"            layout="total, slot, prev, pager, next, jumper"            :total="total">            <el-select              v-model="pageSize"              placeholder="请选择"              :popper-append-to-body="false"              popper-class="page_select"              @change="handleSizeChange">              <el-option                v-for="item in pageSizeList"                :key="item.val"                :label="item.label"                :value="item.val">              </el-option>            </el-select>
    
    </el-pagination>
   

完美解决~