el-select组件封装(解决同页面中多处使用到el-select,且使用对象相同但各自id不同的情况)

 使用背景:每个装备下都有多个批次,以下拉框展示,所以要求每个下拉框里数据不一样,且其中一个下拉框数据选择发生变化时,不能影响其他的!

引用组件代码:

<Select
    :itemId="item.id"
    :options="item.children"
    @initSomeData="initSomeData"
></Select>

import Select from "./component/el-select.vue";
components: { Select }

封装的组件代码如下:

<template>
  <div class="select">
    <el-select
      v-model="curBatchNumber"
      @change="changeBatchNumber"
      placeholder="请选择装备批号"
      size="medium"
      style="width: 85%"
      :title="curBatchNumber"
    >
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.equipmentBatchNumber"
        :value="item.equipmentBatchNumber"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curBatchNumber: "", // 当前装备批号
      equipmentNum: "", // 装备数量
      storageTime: "", // 贮存时间
    };
  },
  props: ["options", "itemId"],
  mounted() {
    this.curBatchNumber = this.options[0].equipmentBatchNumber;
    this.dealData(this.curBatchNumber);
  },
  methods: {
    // 选择的装备型号发生变化时
    changeBatchNumber(val) {
      this.dealData(val);
    },
    dealData(val) {
      this.options.forEach((item) => {
        if (item.equipmentBatchNumber == val) {
          this.equipmentNum = item.equipmentNum;
          this.storageTime = item.storageTime;
        }
      });
      this.$emit(
        "initSomeData",
        this.equipmentNum,
        this.storageTime,
        this.itemId
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.select ::v-deep .el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}
</style>