el-autocomplete中给列表添加tooltip提示
当我们使用了elementUI当中的el-autocomplete,如下图
我们不难发现,当内容过长列表内容用省略号代替的时候,如果结果前面的部分都是相似的,那我们的搜索结果可能意义意义就不大。我们可以给我们的列表加上一个鼠标悬浮提示效果,像这样。
代码如下
<el-autocomplete
v-model="state"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
clearable
>
<template slot-scope="{ item }">
<el-tooltip
class="item"
effect="dark"
:content="item.value"
placement="right-end"
>
<div class="query-item-text" style=" width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap">
{{ item.value }}
</div>
</el-tooltip>
</template>
</el-autocomplete>
效果: