<!--
|
* @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" :disabled="isDisabled(field.value)"></el-option>
|
</el-select>
|
</template>
|
|
<script>
|
import pinyin from './pinyin'
|
|
export default {
|
props: {
|
options: { type: Array, default: () => [] },
|
filter: { 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_
|
}
|
},
|
isDisabled(key){
|
if(this.filter.find(item => item.field.value == key && !item.field.repeat)){
|
return true
|
}else{
|
return false
|
}
|
}
|
}
|
}
|
</script>
|
