vue3+ElementPlus踩坑：数据过多下拉菜单多长

原创

已于 2022-08-21 15:45:43 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript #elementui #vue.js

于 2022-08-21 15:45:02 首次发布

本文分享了在项目中遇到大量数据时，如何通过设置el-dropdown的max-height属性解决下拉菜单过长问题，包括代码示例和解决方案。

项目场景：

vue3+ElementPlus踩坑：数据过多下拉菜单多长

解决方案：

在dropdown里设置个属性max-height

代码demo：

 <el-dropdown v-if="datalist.list.length > 0" max-height="300px">
            <el-button type="primary">
              新增
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="(item, index) in datalist.list"
                  :key="index"
                  @click="onForm(item)">
                  {
  
  { item.name }}
                </el-drop