输入框点击出现下拉框。下拉框点击不隐藏下拉框同时出现详情弹窗

最新推荐文章于 2023-05-11 10:52:30 发布

原创最新推荐文章于 2023-05-11 10:52:30 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

学习笔记专栏收录该内容

49 篇文章

订阅专栏

本文探讨了如何在大量选项下使用el-popover替代el-select，实现下拉框搜索与详情展示的优化。方法一是通过嵌套popover解决，适合选项较少；方法二是采用虚拟滚动和单个Popover显示详情，适用于选项众多场景。

需求：

实现如下图请添加图片描述

分析：

1.下拉框带搜索，一般情况下使用el-select组件完成，该需求存在的问题是点击选项，不能隐藏下拉框，同时显示详情信息。使用el-select未找到能够实现下拉框不隐藏的方法，因此弃用el-select。
2.抛去搜索下拉框，这个样式很符合el-popover的情况。尝试使用el-popover

实现过程：

方法1
初步思路： popover1，template是el-input，内容是一个列表循环出的template为p标签的popover2。popover2的内容就是详情。这样就实现了，点击输入框，显示popover1。点击p——popover2的template，就显示了popover2的内容——详情。
适用范围： 选项不多，此写法简单，代码逻辑顺畅。
缺点： 在选项很多的情况下，那么有多少个选项，就会有多少个popover2。就会让页面卡顿，页面元素如下图：
在这里插入图片描述

代码如下：

<el-popover placement="bottom" :show-arrow="false" :width="200" :offset="0" trigger="click" popper-class="xxx">
              <template #reference>
                <el-input v-model="xxx" placeholder="xxx" />
              </template>
              <div class="xxx">
                <el-popover
                  popper-class="xxx"
                  placement="right-start"
                  trigger="click"
                  ref="popoverRef"
                  :show-arrow="false"
                  :width="312"
                  :offset="0"
                   v-for="item in xxx"
                >
                  <template #reference>
                    <p class="xxx">{{ item.zhenshixingming }}</p>
                  </template>
                  <p class="itemTitle">详细信息</p>
                  <p>
                    <span class="detailLabel">真实姓名</span>
                    <span class="detailInfo" style="margin-right: 40px;">{{ item.zhenshixingming }}</span>
                  </p>
                  <p>
                    <span class="detailLabel">员工编号</span>
                    <span class="detailInfo">{{ item.yuangongbianhao }}</span>
                  </p>
                  <p>
                    <span class="detailLabel">手机号码</span>
                    <span class="detailInfo">{{ item.shoujihaoma }}</span>
                  </p>
                  <div class="alert" v-if="xxx">
                    <img src="xxx" align="left" />
                    xxxxxxx
                  </div>
                  <el-button type="primary" size="small" style="float: right;" @click="clickBtn">确认</el-button>
                </el-popover>
              </div>
            </el-popover>

备注： 通过popoverRef.value或el-popover源码可知，popover的显/隐对应方法是show() / hide()，（element-ui应该是doShow() / doHide()）。因为确认按钮在popover中，所以点击后popover不会主动隐藏，需要执行popoverRef.value.hide()隐藏。

方法2
初步思路：方法1的问题是popover2过多，其实popover2作用只是显示一个详情弹窗，且同时只显示1个，那么1个popover，通过传值显示不同信息，就可以达到效果。只有1个popover2，那这个popover2就不能是选项的 -> 就不能通过点击p来触发显示 -> 需要一个元素的动作来触发显示 ==> 使用el-popover的“虚拟出发” -> 所需的触发元素使用el-input（https://element-plus.gitee.io/zh-CN/component/popover.html#%E8%99%9A%E6%8B%9F%E8%A7%A6%E5%8F%91）
适用范围： 选项数据很多。
缺点： 代码逻辑没有方法1那么简单
代码如下：

<el-popover placement="bottom" :show-arrow="false" :width="200" :offset="0" trigger="click" popper-class="xxx">
              <template #reference>
                <el-input v-model="xxx" placeholder="xxx" ref="inputRef" />
              </template>
              <div class="xxx">
                <p class="xxx" v-for="item in xxx" @click="() => clickP(item.id)">{{ item.zhenshixingming }}</p>
              </div>
            </el-popover>
            <el-popover
              popper-class="xxx"
              placement="right-start"
              :show-arrow="false"
              :width="312"
              :offset="0"
              ref="popoverRef"
              :virtual-ref="inputRef"
            >
              <template #reference><p></p></template>
              <p class="itemTitle">详细信息</p>
              <p>
                <span class="detailLabel">真实姓名</span>
                <span class="detailInfo" style="margin-right: 40px;">{{ detailInfo.zhenshixingming }}</span>
              </p>
              <p>
                <span class="detailLabel">员工编号</span>
                <span class="detailInfo">{{ detailInfo.yuangongbianhao }}</span>
              </p>
              <p>
                <span class="detailLabel">手机号码</span>
                <span class="detailInfo">{{ detailInfo.shoujihaoma }}</span>
              </p>
              <div class="alert" v-if="xxx">
                <img src="xxx" align="left" />
                xxxxxxx
              </div>
              <el-button type="primary" size="small" style="float: right;" @click="clickBtn">确认</el-button>
            </el-popover>

备注： 通过popoverRef.value或el-popover源码可知，popover的显/隐对应方法是show() / hide()，（element-ui应该是doShow() / doHide()）。
1.在clickP方法中要给detalInfo赋值，且执行popoverRef.value.show()显示详情。
2.因为确认按钮在popover中，所以点击后popover不会主动隐藏，需要执行popoverRef.value.hide()隐藏。