基于element UI下el-select的拼音检索
Posted hellofangfang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于element UI下el-select的拼音检索相关的知识，希望对你有一定的参考价值。
自行安装 elementUI和pinyin-match
组件
<template>
<el-select
v-model="newValue"
:filterable="filterable"
:multiple="multiple"
:filter-method="filterMethod"
v-bind="$attrs"
:value-key="props.value"
:disabled="disabled"
:clearable="clearable"
v-on="$listeners"
@focus="onFocus"
>
<el-option
v-for="item in optionsData"
:key="item[props.value]"
v-bind="$attrs"
:disabled="optionDisabled"
:label="item[props.label]"
:value="row ? item : item[props.value]"
/>
</el-select>
</template>
<script>
import PinyinMatch from ‘pinyin-match‘
export default {
name: ‘BlSelect‘,
props: {
value: {
type: [String, Number, Array, Object],
default: ‘‘
},
multiple: {
type: Boolean,
default: false
},
filterable: {
type: Boolean,
default: true
},
clearable: {
type: Boolean,
default: false
},
// select禁用
disabled: {
type: Boolean,
default: false
},
// option是否禁用
optionDisabled: {
type: Boolean,
default: false
},
// 列表数据
options: {
type: Array,
default: _ => [],
required: true
},
// option属性
props: {
type: Object,
default: _ => {
return {
value: ‘value‘,
label: ‘label‘
}
},
required: true
},
// value是否为对象
row: {
type: Boolean,
default: false
}
},
data() {
return {
copyOptions: [],
optionsData: []
}
},
computed: {
newValue: {
set(val) {
this.$emit(‘input‘, val)
},
get() {
return this.value
}
}
},
watch: {
options(val) {
this.optionsData = val
this.copyOptions = JSON.parse(JSON.stringify(val))
}
},
mounted() {
},
methods: {
onFocus(e) {
this.optionsData = this.copyOptions
},
filterMethod(val) {
this.optionsData = this.copyOptions
this.optionsData = this.optionsData.filter(item => PinyinMatch.match(item[this.props.label], val))
},
onChange(val) {
this.$emit(‘change‘, val)
}
}
}
</script>
原来写法
<!--<el-select
v-model="form.lngtqmevaluationid"
placeholder="请选择"
style="width: 150px;"
filterable
>
<el-option
v-for="item in evaluationList"
:key="item.lngtqmevaluationid"
:value="item.lngtqmevaluationid"
:label="item.strtqmevaluationname"
/>
</el-select>
-->
项目中引用组件
bl-select写法
引用组件 import {BlSelect}from ‘@/components/BlSelect‘
<bl-select
v-model="form.lngtqmevaluationid"
placeholder="请选择"
style="width: 150px;"
:options="evaluationList"
:props="{
label: ‘strtqmevaluationname‘,
value: ‘lngtqmevaluationid‘
}"
/>
以上是关于基于element UI下el-select的拼音检索的主要内容，如果未能解决你的问题，请参考以下文章
element-ui中el-select与el-tree的结合使用实现下拉菜单
element UI在 el-select 与 el-tree 结合组件
element-ui中el-select与el-tree的结合使用实现下拉菜单
element-ui中el-select与el-tree的结合使用实现下拉菜单