element el-select组件封装

 el-select组件封装，并且做到模糊查询

// 我这里接口返回的数据 key 是 orgName 和 id，所以写成这样
<SearchAASelect v-model="search.orgId" title="机构名称" :options='options' :filterable='true' :props="{ label: 'orgName', value: 'id' }" />

<template>
  <div class="search-item">
    <label class="search-label">{{title}}：</label>
    <el-select v-model="selectValue" ref="selectLabel" @change="getValue" :filterable='filterable' clearable class="w-220" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item[props.label]" :value="item[props.value]" />
    </el-select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectValue: ''
    }
  },
  props: {
    value: {
      default: ''
    },
    title: {
      default: ''
    },
    options: {
      default: () => { }
    },
    props: {
      default: () => {
        return { label: 'label', value: 'value' }
      }
    },
    filterable: {
      default: false
    }
  },
  model: {
    prop: 'value',
    event: 'getValue'
  },
  watch: {
    value: {
      handler (v) {
        this.selectValue = v
      },
      deep: true
    }
  },
  created () {
    this.selectValue = this.value
  },
  methods: {
    getValue () {
      this.$emit('getValue', this.selectValue)
      // 获取label
      this.$nextTick(() => {
        this.$emit('getOrgName', this.$refs.selectLabel.selectedLabel)
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>