elementui el-select选项框组件封装

1. el-select组件封装

<template>
  <el-select
    v-model="status"
    :style="{
      width:width
    }"
    :placeholder="placeholder"
    clearable
    @change="onchange"
  >
    <el-option
      v-for="item in EnumList"
      :key="item.value"
      :label="item.label || item.dictName"
      :value="Number(item.value) || Number(item.dictKey)"
    />
  </el-select>
</template>
<script>
import { getenumList } from '@/api/public'
export default {
  name: 'EnumSelect',
  props: {
    placeholder: {
      type: String,
      default: '状态'
    },
    paramname: {
      type: String,
      default: 'status'
    },
    code: {
      type: String,
      default: ''
    },
    /**
     * 是否需要网络请求
     * */
    fetchType: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    dictKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      status: '',
      EnumList: [],
      newCode: ''
    }
  },
  watch: {
    dictKey: {
      handler(newV) {
        this.status = newV ? Number(newV) : ''
      },
      deep: true,
      immediate: true
    },
    code: {
      handler(newV) {
        this.newCode = newV
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    if (!this.fetchType) {
      this.EnumList = this.list
    } else {
      this.fetchEnumListData()
    }
  },
  methods: {

    async fetchEnumListData() {
      const res = await getenumList(this.newCode)
      if (res.code === 200) {
        this.EnumList = res.data
      }
    },

    onchange(e) {
      this.$emit('useEnumSelect', { paramname: this.paramname, value: this.status })
    }
  }
}
</script>

2.父组件调用示例

<template>
  <div class="dialog">
    <EnumSelect
      placeholder="请选择"
      paramname="paramname"
      code="code"
      :dict-key="String(dictKey)"
      @useEnumSelect="useEnumSelect"
    />
  </div>
</template>

<script>
import EnumSelect from '@/components/EnumSelect'
export default {
  components: {
    EnumSelect
  },
  data() {
    return {
      dictKey: '',
      form: {
        paramname: ''
      }
    }
  },
  methods: {
    useEnumSelect(data) {
      this.form[data.paramname] = data.value
    }
  }
}
</script>