element-ui select 可搜索下拉框实现关键词高亮

最新推荐文章于 2024-05-14 11:58:44 发布

用xin创造快乐

最新推荐文章于 2024-05-14 11:58:44 发布

阅读量1.2k

点赞数 1

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/Hei_ma_feng/article/details/124826691

版权

话不多说，先来效果

效果图

代码如下：

<template>
	<el-select filterable default-first-option :filter-method="mzFilterMethod" @focus="mzFocus" v-model="value" placeholder="民族">
		<el-option v-for="item in mzList" :label="item.label" :value="item.value" :key="item.value">
			<div v-html="item.html"></div>
		</el-option>
	</el-select>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      mzListServe: [
	  {
   
	    id: 1,
	    label: '汉族',
	    value: 1,
	    html: '<span>汉族</span>'
	  },
	  {
   
	    id: 2,
	    label: '壮族',
	    value: 2,
	    html: '<span>壮族</span>'
	  },
	  {
   
	    id: 3,
	    label: '满族',
	    value: 3,
	    html: '<span>满族</span>'
	  },
	  {
   
	    id: 4,
	    label: '回族',
	    value: 4,
	    html: '<span>回族</span>'
	  },
	  {
   
	    id: 5,
	    label: '苗族',
	    value: 5,
	    html: '<span>苗族</span>'
	  },
	  {
   
	    id: 6,
	    label: '维吾尔族',
	    value: 6,
	    html: '<span>维吾尔族</span>'
	  },
	  {
   
	    id: 7,
	    label: '土家族',
	    value: 7,
	    html: '<span>土家族</span>'
	  },
	  {
   
	    id: 8,
	    label: '彝族',
	    value: 8,
	    html: '<span>彝族</span>'
	  },
	  {
   
	    id: 9,
	    label: '蒙古族',
	    value: 9,
	    html: '<span>蒙古族</span>'
	  },
	  {
   
	    id: 10,
	    label: '藏族',
	    value: 10,
	    html: '<span>藏族</span>'
	  },
	  {
   
	    id: 11,
	    label: