DeeSearchSelect.vue 1.8 KB
Newer Older
wangdanlei's avatar
wangdanlei committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
<template>
  <div>
    <el-select
      v-model="data"
      v-bind="itemObj&&itemObj.component"
      filterable
      remote
      :size="size"
      reserve-keyword
      :remote-method="remoteMethod"
      :loading="loading"
      v-on="itemObj&&itemObj.handler"
    >
      <el-option
        v-for="(option,index) in options"
        :key="index + option.value"
        v-bind="option"
      />
    </el-select>
  </div>
</template>

<script>
import { get } from '@/utils/http'

export default {
  name: 'DeeSearchSelect',
  components: {},
  props: {
    data: {
      type: [Array, String],
      default: () => ''
    },
    itemObj: {
      type: Object,
      default: () => {}
    },
    size: {
      type: String,
      default: () => 'small'
    }

  },
  data() {
    return {
      selectValue: '',
      options: [],
      loading: false
    }
  },
  computed: {

  },
  watch: {
    data: {
      immediate: true,
      handler: function(val) {
        if (val !== this.selectValue) {
          this.selectValue = val
          this.$emit('input', val)
        }
        // this.originalData = val
      }
    }
  },
  mounted: function() {
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        const formData = { name: query }
        get(this.itemObj && this.itemObj.url || '/api/users', formData).then(res => {
          this.options = []
          if (res.items) {
            res.items.forEach(el => {
              this.options.push({
                value: el[this.itemObj && this.itemObj.valueWord || 'id'],
                label: el[this.itemObj && this.itemObj.labelWord || 'name']
              })
            })
          }
        })
      } else {
        this.options = []
      }
    }
  },
  filter: {}
}
</script>

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