如图所示,展开下拉框时,每条列表悬浮显示详情
<el-select v-model="value" placeholder="请选择" clearable @change="selectChange">
<template #prefix v-if="value!=''">
<el-popover
placement="right"
width="300"
trigger="hover">
<div>{{ detail }}</div>
<el-button slot="reference" class="popoverBtn" size="mini" circle><i class="fa fa-fw fa-info"></i></el-button>
</el-popover>
</template>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span style="float: left">{{ item.name }}</span>
<el-popover
placement="right"
width="300"
trigger="hover">
<div>{{ item.detail }}</div>
<el-button slot="reference" class="popoverBtn" size="mini" circle><i class="fa fa-fw fa-info"></i></el-button>
</el-popover>
</el-option>
</el-select>
export default {
data() {
return {
options: [
{
id: '1',
name: '成功率60%以上',
detail:'成功率60%以上详情',
},
{
id: '2',
name: '成功率30%~60%',
detail:'成功率30%~60%详情',
},
{
id: '3',
name: '成功率10%~30%',
detail:'成功率10%~30%详情',
},
],
value: '',
detail:''
}
},
methods: {
selectChange(){
console.log(this.value)
this.options.map(item=>{
if(this.value==item.id){
this.detail=item.detail;
}
})
},
},
}
::v-deep .el-input__prefix {
height: 100%;
right: 30px;
left: auto;
width: 24px;
top: 7px;
}