CtyMapping.vue

<template>
  <el-select :disabled="isDisabled" @change="handleChange" clearable filterable placeholder="请选择国家（地区）" v-bind="$attrs" v-model="selectedValue">
    <el-option :key="item.value" :label="item.key + ' - ' + item.label" :value="item.value" v-for="item in options"></el-option>
  </el-select>
</template>

<script>
import commonDepend from "../../mixin/commonDepend.js";
import Api from "../../service/Api.js";

export default {
  data() {
    return {
      options: []
    };
  },
  mixins: [commonDepend],
  inject: {
    root: {
      default: () => null
    }
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    selectedValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    },
    isDisabled() {
      return this.$store.state.Status.mode === "display" || this.disabled;
    }
  },
  created() {
    // 调接口获取三位国家bopcty,stb->ctycod,两位国家cty
    this.init();
  },
  methods: {
    handleChange(value) {
      this.$emit("change", value);
      this.changeModify();
    },
    async init() {
      let res = await Api.post("/Collection/cty/queryCtyMappingList");
      if (res.respCode === SUCCESS) {
        this.options = res.data;
      }
    }
  }
};
</script>

<style scoped>
</style>