需求:
实现如下图
分析:
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()隐藏。