二次封装el-select

需求，多次使用el-select，进行二次封装

image.png

遇到的坑：一直获取不到option里的value值，最后使用@input="change($event)"

公用组件

• 注意事项
  1、将 value属性 props出来，否则报错；
  2、用输入框事件把 选择值发出 @input="change($event)"

<template>
  <div class="category">
    <el-select
      class="mr__m"
      :value="value"
      placeholder="请先选择分类"
      filterable
      @input="change($event)"
    >
      <el-option
        v-for="(option, index) in list"
        :key="'categoryOptions' + index"
        :label="option.dictValue"
        :value="option.dictKey"
      />
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'select-category',
  props: {
    list: {
      type: Array,
      default: _ => []
    },
    value: {
      type: [String, Object]
    }
  },
  methods: {
    change(val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style lang="scss" scoped>
.category {
  padding: 16px 0;
}
</style>

引用组件

image.png