字典项选择

字典项选择

<template>
  <div class="SelectDataCode">
    <div v-if="readOnly">
      {{labelName}}
    </div>
    <el-select v-model="value" v-bind="$attrs" v-on="$listeners" v-else>
      <el-option v-for="item in options" :key="item[defaultProps.value]" :label="item[defaultProps.label]" :value="item[defaultProps.value]">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'SelectDataCode',
  data() {
    return {
      value: '',
    }
  },
  props: {
    readOnly: {  //用于只读显示
      type: Boolean,
      default: false,
    },
    dataCode: {
      type: String,
      required: true,
    },
    dataCodeValue: {
      type: String,
      required: true,
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          label: 'name',
          value: 'code'
        }
      }
    }
  },
  computed: {
    options() {
      if (this.$store.getters['dataCode/dataCodes'][this.dataCode]) {
        return this.$store.getters['dataCode/dataCodes'][this.dataCode]
      } else {
        this.$message.error(`没有${this.dataCode}相关的字典数据,请先检查!`);
        return []
      }
    },
    labelName() {
      if (this.readOnly && this.value && this.options) {
        if (this.$attrs.hasOwnProperty('multiple')) { //多选
          let arr = this.value.split(',');
          return arr.map(item => {
            return this.findOne(item)
          }).join(';');
        } else {
          return this.findOne(this.value)
        }
      } else {
        return ''
      }
    }
  },
   methods: {
    findOne(value) {
      return this.options.find(item => { return item[this.defaultProps.value] === value })[this.defaultProps.label];
    }
  },
  watch: {
    value: {
      handler: function(oldval, newval) {
        this.$emit('update:dataCodeValue', this.value)
      }
    }
  },
  mounted() {
    this.value = this.dataCodeValue;
  }
}
</script>
<style lang="scss" scoped>
</style>
  <el-table-column show-overflow-tooltip prop="sex" label="性别">
        <template #default="{ row }">
       <select-data-code :dataCodeValue.sync="row.sex" dataCode="sex"></select-data-code>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="userType" label="用户类别">
        <template #default="{ row }">
          <select-data-code :dataCodeValue.sync="row.userType" dataCode="userType"></select-data-code>
        </template>
      </el-table-column>