el-autocomplete中给列表添加tooltip提示

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>

效果：