el-select模糊搜索字段高亮

2022-01-20  本文已影响0人  好奇的猫猫猫
效果图
<el-select
                  v-model="gName"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod"
                  :loading="searchLoading"
                >
                  <el-option
                    v-for="item in searchOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  <span v-html="showData(item.label)">{{ item.label }}</span>
                  </el-option>
                </el-select>
showData(val) {

      return val.replace(
        new RegExp(this.filterValue, "g"),//filterValue为搜索字段
        `<span style='color: #48a2ff'>${this.filterValue}</span>`
      );

    }
上一篇 下一篇

猜你喜欢

热点阅读