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

意初

已于 2022-08-21 15:45:43 修改

阅读量998

点赞数 1

文章标签：前端 html javascript elementui vue.js

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

本文链接：https://blog.csdn.net/weixin_43928112/article/details/126451501

版权

项目场景：

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-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button
            type="primary"
            v-else-if="datalist.list.length <= 0"
            @click="onForm()"
            >新增
          </el-button>