elementui封装select选择框

封装的组件

<template>
  <div>
    <!-- 请选择逾期性质 -->
    <el-select @change="modelchange" class="select-width" size="mini" v-model="modelCode" :placeholder="$t('COMPONENTS.COMP029')" clearable>
      <el-option v-for="item in options" :key="item.code" :label="item.nameCN" :value="item.code"></el-option>
    </el-select>
  </div>
</template>
 
<script>
import { getMasterStorage } from "../../common/js/getMasterStorage.js";
//逾期性质共通
export default {
  name: "component029",
  data() {
    return {
      modelCode: "",
      options: ""
    };
  },
  methods: {
    modelchange(event) {
      if (event) {
        let selecteName = {};
        selecteName = this.options.find(item => {
          return item.code === event;
        });
        this.$emit("overdueTypeselectinput", { code: this.modelCode, val: selecteName.nameCN });
      } else {
        this.$emit("overdueTypeselectinput", "");
      }
    }
  },
  props: ["modelVal"],
  mounted() {
    this.modelCode = this.modelVal;
    this.options = getMasterStorage("029");
  }
};
</script>
<style scoped>
@import "../../assets/css/common.css";
</style>

页面调用

<el-col :span="8">
    <el-form-item prop="overdueType">
      <span slot="label">
        <!-- 逾期性质 -->
        <b>{{$t('SCM607.S3')}}</b>
      </span>
      <component029 v-if="editFlag" :modelVal="jobLogForm.overdueType" v-on:overdueTypeselectinput="overdueTypeval"></component029>
    </el-form-item>
  </el-col>
//首先导入此组件
import component029 from "../../components/select/component029.vue";
在vue中注册
export default {
  components: {
    component029
  }，
  {
    jobLogForm: {
     overdueType：“”，
     overdueTypeName：“”
    }
  }，
  methods：{
  // 逾期性质下拉框,此处绑定选择后的值
    overdueTypeval(data) {
      if (data) {
        this.jobLogForm.overdueType = data.code;
        this.jobLogForm.overdueTypeName = data.val;
      } else {
        this.jobLogForm.overdueType = "";
        this.jobLogForm.overdueTypeName = "";
      }
    },
  }
}