项目中遇到过搜索框的需求，要完善展示搜索联想信息，根据要求对element-ui的input框进行了一下样式修改，有需要的可借鉴一下。

先看看最终效果

下面开始实现

选中模板（项目基于vue2+element-ui搭建）

此处我选择的是 input 组件中的自定义模板
element.eleme.io/#/zh-CN/com…

修改样式

HTML部分代码

输入框部分

 <template>
  <div class="youshangjiao" style="z-index: 110">
    <div class="ssk">
      <!-- :popper-append-to-body="false"  若要修改下拉框样式，此处必不可少的属性 -->
      <el-autocomplete
        :popper-append-to-body="false"
        class="fk"
        v-model="state1"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @select="handleSelect"
        size="small"
      >
        <i
          class="el-icon-search el-input__icon"
          slot="suffix"
          @click="handleIconClick"
        >
        </i> 

        <!-- 此处放置下拉框 -->

      </el-autocomplete>
    </div>
  </div>
</template>

下拉框部分

<template class="cc" v-slot="{ item }">
          <div v-if="item.id === 1" style="color: #111111">
            已检索到"{{ state1 }}"相关结果{{ item.changdu }}条
          </div>
          <div class="bankuai">
            <div class="diyihang" style="display: flex">
              <div
                v-html="item.biaoti"
                style="
                  font-weight: bold;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  margin: 0;
                  color: #111111;
                "
              ></div>
              <span style="color: #fff">查看详情</span>
            </div>

            <div
              v-html="item.neirong"
              style="
                font-size: 12px;
                color: #111111;
                overflow: hidden;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-wrap: break-word;
              "
            ></div>
          </div>
        </template>

JS部分代码

<script>
export default {
  data() {
    return {
      state1: "",
      restaurants: [],
    };
  },

  methods: {
    skip(e) {
      this.$router.push(`${e}`);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;

      // 调用 callback 返回建议列表的数据
      // 关键字高亮
      let htmlStr = `<span style='color:green;'>${queryString}</span>`;

      //添加index属性（编号)
      results.forEach((item, index) => {
        item.biaoti = item.selectLable.replace(queryString, htmlStr);
        item.neirong = item.address.replace(queryString, htmlStr);
        // 添加数据长度（条数）属性，以此来获取建议栏（关联栏）查询到的数据条数
        item.changdu = results.length;
        // 添加属性编号，以此来控制检索条数展示栏的渲染情况
        item.id = index + 1;
      });

      cb(results);
    },

    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.selectLable
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) !== -1
        );
      };
    },
    loadAll() {
      return [
        {
          selectLable: "海岛桑是如何飘洋过海来到此的？",
          address: "我是海岛桑，顾名思义，长在海岛的桑科植物。在内陆大家...",
        },
        {
          selectLable: "让我们瞅瞅景天植物的特殊技能",
          address: "我们景天植物的特殊技能就是...",
        },
        {
          selectLable: "我去的犬瘟热山去达摩",
          address: "去饿亲热亲热",
        },
        {
          selectLable: "看风景依然具有浑然一体",
          address: "哈达请问企鹅·",
        },
        {
          selectLable: "看山水依然具有怪石嶙峋",
          address: "地区划为期间的阿松",
        },
      ];
    },
    handleSelect(item) {
      this.state1 = item.selectLable;
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  computed: {},
};
</script>

核心方法querySearch的调整解析

添加高亮关键字功能

// 关键字高亮
      let htmlStr = `<span style='color:green;'>${queryString}</span>`;

获取到自定义属性并作展示

results.forEach((item, index) => {
        item.biaoti = item.selectLable.replace(queryString, htmlStr);
        item.neirong = item.address.replace(queryString, htmlStr);
        // 添加数据长度（条数）属性，以此来获取建议栏（关联栏）查询到的数据条数
        item.changdu = results.length;
        // 添加属性编号，以此来控制检索条数展示栏的渲染情况
        item.id = index + 1;
      });

       其中， results.length 帮助我们拿到下拉框建议匹配到的数据条数，index 为我们自己添加的属性，以此来判断是否渲染匹配条数信息，若无此属性会导致  “已检索到xx相关结果xx条”  跟着整个插槽多次渲染。

CSS部分代码

       首先，保留模板样式，后续添加的全部css代码如下

<style scoped>
.youshangjiao {
  position: absolute;
  display: flex;
  width: 35%;
  height: 10%;
  top: 5%;
  right: 5%;
}
.ssk {
  position: relative;
  width: 64%;
  height: 90%;
}
.fk {
  width: 100%;
  height: 80%;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fk /deep/ .el-input__inner {
  background-color: rgba(140, 165, 165, 0.4);
  font-weight: bold;
  color: #fff;
  border-radius: 20px;
  box-shadow: 1.5px 1px 1px #667f8a;
}
.fk /deep/ .el-input__inner:focus {
  border-color: #b3b896;
}
.fk /deep/ .el-input__icon {
  color: #617202;
}
.fk /deep/ .el-input__inner::placeholder {
  color: #e6e6e6;
}
div /deep/ .el-autocomplete-suggestion {
  background-color: rgba(135, 165, 165, 0.6);
}

/* 去掉下拉框的顶部小三角箭头 ，看着像一个箭头，其实是两个重叠在一起的箭头*/
div /deep/.el-popper .popper__arrow,
div /deep/.el-popper .popper__arrow::after {
  display: none;
}

.bankuai {
  border-top: 1px solid rgb(114, 114, 114);
}
</style>

       因为是基于element-ui的input作修改，因此样式修改需借助deep

输入框样式部分修改

.fk /deep/ .el-input__inner {
  background-color: rgba(140, 165, 165, 0.4);
  font-weight: bold;
  color: #fff;
  border-radius: 20px;
  box-shadow: 1.5px 1px 1px #667f8a;
}
.fk /deep/ .el-input__inner:focus {
  border-color: #b3b896;
}
.fk /deep/ .el-input__icon {
  color: #617202;
}
.fk /deep/ .el-input__inner::placeholder {
  color: #e6e6e6;
}

.el-input__inner ：控制输入框背景颜色，字体粗细/颜色，形状（圆角）等
.el-input__inner:focus ：代表输入框被选中后的状态
.el-input__icon ：控制搜索小图标的样式
.el-input__inner::placeholder ：控制引导文字的样式

下拉框样式部分修改

修改下拉框样式必须在el-autocomplete元素上加上  :popper-append-to-body="false"  ，否则无法生效

div /deep/ .el-autocomplete-suggestion {
  background-color: rgba(135, 165, 165, 0.6);
}

/* 去掉下拉框的顶部小三角箭头 ，看着像一个箭头，其实是两个重叠在一起的箭头*/
div /deep/.el-popper .popper__arrow,
div /deep/.el-popper .popper__arrow::after {
  display: none;
}

.bankuai {
  border-top: 1px solid rgb(114, 114, 114);
}

.el-autocomplete-suggestion ：控制下拉框背景样式
.el-popper .popper__arrow ：代表下拉框与输入框衔接的小箭头，有两个若去除则都要去除
.bankuai ：为分割线，名字随便取，不需要可去除

源码地址

源码已上传到码云仓库gitee.com/laofang/zuj…