selectItem

src/components/Select.vue

+<!--
+ * @Description: file content
+ * @Version: 2.0
+ * @Autor: LYS
+ * @Date: 2021-12-21 15:59:08
+ * @LastEditors: LYS
+ * @LastEditTime: 2021-12-21 17:41:46
+-->
+<template>
+  <div class="searchSelect">
+    <slot name="sele"  :slotData = "'sssss'">  
+    <el-select v-model="selectData">
+      <div class="searchDiv">
+        <el-input
+          placeholder="请输入"
+          v-model="searchTxt">
+        </el-input>
+      </div>
+      <el-option
+        v-for="item in searchResult"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+        <span v-html="listHtml(item)"></span>
+      </el-option> 
+    </el-select>
+    </slot>
+  </div>
+</template>
+<script>
+export default {
+  data(){
+    return {
+      selectData:'',
+      searchTxt:'',
+      optionData:[
+        {
+          lable: '1',
+          value: '深圳有限公司'
+        },
+        {
+          lable: '2',
+          value: '深圳游戏有限公司'
+        },
+        {
+          lable: '3',
+          value: '东莞公司'
+        },
+        {
+          lable: '4',
+          value: '东莞有限公司'
+        },
+        {
+          lable: '5',
+          value: '深圳某某有限公司'
+        },
+        {
+          lable: '6',
+          value: '深圳中兴有限公司公司'
+        }
+      ]
+    }
+  },
+
+  computed:{
+    searchResult(){
+      if(this.searchTxt){
+        return this.optionData.filter(item=>item.value.includes(this.searchTxt))
+      }else{
+        return this.optionData;
+      }
+    }
+  },
+
+  methods:{
+    listHtml(item){
+      return item.value.replace(new RegExp(this.searchTxt,'g'),'<b style="color:red;">'+this.searchTxt+'</b>')
+    }
+  }
+}
+</script>
+<style lang="scss">
+  .searchSelect{
+    width: 200px;
+    margin: 300px auto;
+  }
+  .el-scrollbar{
+    display: block !important;
+  }
+</style>
\ No newline at end of file

src/views/sy/index.vue

@@ -55,7 +55,7 @@
                
                 ><span  :class="{ active: $route.path == '/jqglIndex/sjcj' }">新增警犬</span></el-breadcrumb-item
                 >
-                <el-breadcrumb-item :to="{ path: '/jqglIndex/xx2' }"
+                <!-- <el-breadcrumb-item :to="{ path: '/jqglIndex/xx2' }"
                 
                  @click="hanndleClickBreadcrumb('two')"
                 ><span  :class="{ active: $route.path == '/jqglIndex/xx2' }">选项二</span></el-breadcrumb-item
@@ -64,7 +64,7 @@
                  
                  @click="hanndleClickBreadcrumb('three')"
                 ><span :class="{ active: $route.path == '/jqglIndex/xx3' }">选项三 </span></el-breadcrumb-item
-                >
+                > -->
               </el-breadcrumb>
             </span>
           </div>