<template>
  <!-- 采用组件传值的方式 -->
  <div style="width: 100%">
    <el-select :disabled="allowSelect" :multiple="props.ifMultiple" v-model="props.value" clearable :style=" `width:${width}%;` " @change="change">
<!--      <el-option v-for="(option,i) in optionList" :key="i" :value="option[optionVal?optionVal:'value']"-->
<!--                 :label="option[optionLab?optionLab:'label']"/>-->
      <el-option v-for="(option,i) in optionList" :key="i" :value="option.dicCode" :disabled="option.disabled"
                 :label="option.dicName"/>
    </el-select>
  </div>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onMounted,
  computed
} from 'vue'

const {
  proxy
} = getCurrentInstance()
const emit = defineEmits(['change'])


const props = defineProps({
  optionList: {
    type: Array,
    default: () => []
  },
  width: {
    type: Number,
    default: () => '100'
  },
  value: {
    type: String,
    default: () => ''
  },
  ifMultiple: {
    type: Boolean,
    default: () => false
  },
  allowSelect: {
    type: Boolean,
    default: () => false
  },
})
const val = computed(() => {
  return props.value
})



const change = (val) => {
  console.log(val)
  emit('change', val)
}
</script>

<style>
</style>
