X-web/src/views/modules/sys/dict-select.vue

<template>
  <div>
    <el-select
      v-model="value"
      ref="select"
      placeholder="请选择"
      filterable
      remote
      :remote-method="remoteMethod"
      @change = "onChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  export default {
    name: 'dict-select',
    props: ['dictId', 'dictType'],
    model: {
      prop: 'dictId',
      event: 'select'
    },
    watch: {
      dictId (newVal) {
        this.init(newVal, this.dictType)
      }
    },
    data () {
      return {
        value: '',
        name: '',
        options: [],
        loading: false
      }
    },
    mounted () {
      this.init(this.dictId, this.dictType)
    },
    methods: {
      async init (dictId, dictType) {
        this.options = []
        this.current = 1
        this.getList(dictId, dictType)
      },
      remoteMethod (query) {
        this.options = []
        this.name = query
        this.getList(this.dictId, this.dictType)
      },
      getList (dictId, dictType) {
        this.$http({
          url: this.$http.adornUrl(`/user-service/dict/queryByType`),
          method: 'get',
          params: this.$http.adornParams({
            'type': dictType
          })
        }).then(({data}) => {
          if (data && data.code === '200') {
            data.data.forEach(item => {
              this.options.push({
                label: item.value,
                value: item.id
              })
            })
            if (dictId) {
              this.value = dictId
            }
          } else {
            this.options = []
          }
        })
      },
      onChange (item) {
        if (item === 'undefined') {
          this.value = null
        }
        this.$emit('select', item)
      }
    }
  }
</script>

<style scoped>

</style>