kd-aiot-frontend-aps/src/components/Dict/DictSelection.vue

<template>
  <el-select
    v-model="selectVal"
    style="width: 100%"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-option
      v-for="item in dictList"
      :key="item[valueName]"
      :value="item[valueName]"
      :label="item[labelName]"
    ></el-option>
  </el-select>
</template>

<script>
  import dictEnum from '@/enum/dict';
  import { mapActions, mapGetters } from 'vuex';
  export default {
    model: {
      prop: 'value',
      event: 'updateVal'
    },
    props: {
      value: {
        type: [String, Number],
        default: ''
      },
      dictName: {
        type: String,
        required: true
      },
      labelName: {
        type: String,
        default: 'dictValue'
      },
      valueName: {
        type: String,
        default: 'dictCode'
      },
      listFormatte: Function
    },
    data () {
      return {};
    },
    computed: {
      ...mapGetters(['dict', 'getDict']),
      dictList () {
        return (
          (this.listFormatte &&
            this.listFormatte(this.dict[dictEnum[this.dictName]] || [])) ||
          this.dict[dictEnum[this.dictName]] ||
          []
        );
      },
      selectVal: {
        set (val) {
          this.$emit('updateVal', val);
          // change获取选中项所有数据

          this.$emit('itemChange', this.getDict(this.dictName, val));
        },
        get () {
          return this.value;
        }
      }
    },
    created () {
      if (this.dictName) {
        this.requestDict(this.dictName);
      }
    },
    methods: {
      ...mapActions('dict', ['requestDict'])
    }
  };
</script>