Select.vue

<template>
  <el-select
    :id="id"
    v-model="model"
    v-bind="$attrs"
    v-on="$listeners"
    v-bind:disabled="isDisable"
    :clearable="clearable"
    @click.native="handleClick"
  >
    <template v-if="dbCodeList.length > 0">
      <el-option
        v-for="item in dbCodeList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </template>
    <template v-else-if="code.length > 0">
      <el-option
        v-for="item in code"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </template>
    <slot v-else></slot>
  </el-select>
</template>

<script>
import Api from "~/service/Api"
export default {
  props: {
    value: {
      type: [String, Array, Number],
      default: undefined,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    id: {
      type: String,
      default: undefined,
    },
    code: {
      type: Array,
      default: function () {
        return [];
      },
    },
    dbCode: {
      type: String,
      default: undefined,
    },
  },
  data(){
    return {
      dbCodeList:[],
    }
  },
  watch:{
    //动态从服务器上渲染码表
    dbCode(){
      if(!this.dbCode){
        this.dbCodeList=[]
        //清理数据
        this.model = undefined;
        return 
      }
      getDBCode()
    }
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(newVal) {
        this.$emit("input", newVal);
      },
    },
    mode() {
      return this.$store.state.Status.mode;
    },
    isDisable: {
      get() {
        return this.mode === "display" || this.disabled;
      },
    },
    highlight() {
      return this.$store.state.Status.highlights.indexOf(this.id) !== -1;
    },
    attrs() {
      if (this.mode === "display" || this.disabled) {
        let { placeholder, ...rest } = this.$attrs;
        rest = { placeholder: " ", ...rest };
        return rest;
      }
      return this.$attrs;
    },
  },
  methods: {
    handleClick: function (e) {
      let ev = new Event("click", { bubbles: true });
      let node = e.target;
      if (node.parentElement) {
        node.parentElement.dispatchEvent(ev);
      }
    },
    getDBCode(){
      let args = {tbl:this.dbCode,lang:this.$store.state.I18n.lang.toUpperCase()}
      if(args.lang == "ZH"){
        args.lang = "CN";
      }
      Api.post("getCodetable",args).then(rtnmsg=>{
        if(rtnmsg.respCode==SUCCESS){
          this.dbCodeList=rtnmsg.data
        }
      })
    }
  },
  mounted(){
    if(this.dbCode){
      this.getDBCode()
    }
  }
};
</script>

<style>
/* .el-select.highlight .el-input .el-input__inner {
  border-color: red;
} */
</style>