el-select二次封装。根据数据字典获取数据

<template>
  <!-- 字典下拉框公共组件 huang -->
  <el-select
    v-model="selValue"
    placeholder="请选择"
    :size="size"
    @change="changeHandle"
    :multiple="multiple"
    :disabled="disabled"
    :clearable="clearable"
    style="width: 100%"
  >
    <el-option
      v-for="item in options"
      :key="item.itemId"
      :label="item.itemName"
      :value="item.itemName"
    ></el-option>
  </el-select>
</template>
 
<script>
import { dict } from "@/http/modules/comm";
export default {
  components: {},
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: "small"
    },
    code: {
      type: String,
      required: true
    },
    value: {
      type: [String, Array],
      default: ""
    }
  },
  data() {
    return {
      options: [],
      selValue: this.value
    };
  },
  watch: {
    // huang
    code(val) {
      this.listDict();
    },
    options(val) {
      // console.log(val);
    },
    value(val) {
      // 优化记录：回填赋值时增加 '' (this.selValue = '' + val)解决数字字典值不能回填的问题，即强制转成字符
      // 在之前监听回显值变化赋值回填值之外在下拉数据读取完成后赋值回填值，解决部分场景不能回填选中值的问题
      this.selValue = val;
    },
   
  },
  created() {},
  mounted() {
    this.listDict();
  },
  methods: {
    changeHandle(val) {
      this.$emit("input", val); //值回显父组件
      this.$emit("change", val);// change事件
    },
    listDict() {
      dict({ code: this.code }).then(res => {
        if (res.code == 200) {
          this.options = res.data;
          this.selValue = this.value;
        }
      });
    }
  }
};
</script>
<style scoped>
</style>