字典3

<template>
  <div class="SelectDataCode">
    <el-select v-model="value" v-bind="$attrs" v-on="$listeners">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item[defaultProps.label]"
        :value="item[defaultProps.value]"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'selectModel',
  data() {
    return {
      options: [],
    }
  },
  props: {
    fn: {
      type: Function,
      required: true,
    },
    query: {
      type: Number | String,
    },
    selectValue: {
      type: Number | String,
      required: true,
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          label: 'fieldName',
          value: 'fieldId',
        }
      },
    },
  },
  computed: {
    value: {
      get() {
        return this.selectValue
      },
      set(newValue) {
        this.$emit('update:selectValue', newValue)
        return newValue
      },
    },
  },
  watch: {
    selectValue: {
      handler: function (oldval, newval) {
        this.value = this.selectValue
      },
      immediate: true,
    },
    query: {
      handler: function (oldval, newval) {
        this.fn &&
          this.query &&
          this.fn({ objectModelId: this.query }).then((res) => {
            this.options = res
            if (this.query) {
              let index = this.options.findIndex(
                (item) => item.fieldId === this.value
              )
              if (!~index) {
                this.value = ''
              }
            }
          })
      },
      immediate: true,
    },
  }
}
</script>
<style lang="scss" scoped>
</style>