基于element UI下el-select的拼音检索bl-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'

        }"

      />