美文网首页
el-select模糊搜索字段高亮

el-select模糊搜索字段高亮

作者: 好奇的猫猫猫 | 来源:发表于2022-01-20 15:22 被阅读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>`
      );

    }

相关文章

网友评论

      本文标题:el-select模糊搜索字段高亮

      本文链接:https://www.haomeiwen.com/subject/qfvjhrtx.html