el-autocomplete 查询字段自定义颜色标记

最新推荐文章于 2023-09-18 15:06:48 发布

Nick_5

最新推荐文章于 2023-09-18 15:06:48 发布

阅读量480

点赞数 1

文章标签： vue elementui autocomplete

本文链接：https://blog.csdn.net/weixin_41877243/article/details/111589393

版权

<el-autocomplete
       v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="输入系统关键字"
        @select="handleSelect"
>
    <template slot-scope="{ item }">
        <div class="innerHead" v-if="item.value!=='暂无匹配内容'">
            <div>
                <p>
                    <span v-html="item.nameStr"/>
                </p>
            </div>
        </div>
        <div v-else>
            <span>暂无匹配内容</span>
        </div>
    </template>
</el-autocomplete>

export defalut {
	data(){
		return {
			state: '',
			searchData: [
				{
					value: 123,
				},
				{
					value: 789
				}
			]
		}
	},
	methods:{
	querySearchAsync(queryString, cb) {
        var restaurants = this.searchData;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          results = results.map(res => {
            res.nameStr = res.value.replace(queryString, `<span style="color: #1F53F1;">${queryString}</span>`)
            return res
          })

          if (results.length === 0) {
            results[0] = {
              value: '暂无匹配内容'
            }
          }
          console.log(results);
          cb(results);
        }, 1000 * Math.random());
      },
	},
	createStateFilter(queryString) {
      return (state) => {
        return (state.name.toLowerCase().includes(queryString.toLowerCase()));
      };
	},
}