scFilterBar 字段支持全拼，首字搜索

src/components/scFilterBar/index.vue

@@ -39,9 +39,8 @@
 												<el-tag size="medium">{{index+1}}</el-tag>
 											</td>
 											<td>
-												<el-select v-model="item.field" placeholder="过滤字段" filterable @change="fieldChange(item)">
+												<py-select v-model="item.field" :options="fields" placeholder="过滤字段" filterable @change="fieldChange(item)">
-													<el-option v-for="field in fields" :key="field.value" :label="field.label" :value="field"></el-option>
+												</py-select>
-												</el-select>
 											</td>
 											<td>
 												<el-select v-model="item.operator" placeholder="运算符">
@@ -98,11 +97,13 @@
 
 <script>
 	import config from "@/config/filterBar"
+	import pySelect from './pySelect'
 	import my from './my'
 
 	export default {
 		name: 'filterBar',
 		components: {
+			pySelect,
 			my
 		},
 		props: {

src/components/scFilterBar/pySelect.vue

@@ -0,0 +1,51 @@
+<!--
+ * @Descripttion: 二次封装el-select 支持拼音
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月31日22:26:56
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-select v-bind="$attrs" :filter-method="filterMethod" @visible-change="visibleChange">
+		<el-option v-for="field in optionsList" :key="field.value" :label="field.label" :value="field"></el-option>
+	</el-select>
+</template>
+
+<script>
+	import pinyin from './pinyin'
+
+	export default {
+		props: {
+			options: { type: Array, default: () => [] }
+		},
+		data() {
+			return {
+				optionsList: [],
+				optionsList_: []
+			}
+		},
+		mounted() {
+			this.optionsList = this.options
+			this.optionsList_ = [...this.options]
+		},
+		methods: {
+			filterMethod(keyword){
+				if(keyword){
+					this.optionsList = this.optionsList_
+					this.optionsList = this.optionsList.filter((item) =>
+						pinyin.match(item.label, keyword)
+					);
+				}else{
+					this.optionsList = this.optionsList_
+				}
+			},
+			visibleChange(isopen){
+				if(isopen){
+					this.optionsList = this.optionsList_
+				}
+			}
+		}
+	}
+</script>