vue字典组件

<template>
  <el-radio-group v-if="tagType=='radio'" v-model="dictValue" :disabled="disabled" @change="handleInput">
    <el-radio v-for="(item, key) in dictOptions" :key="key" :label="key" :value="key">{{ item }}</el-radio>
  </el-radio-group>

  <el-radio-group v-else-if="tagType=='radioButton'" v-model="dictValue" :disabled="disabled" @change="handleInput">
    <el-radio-button v-for="(item, key) in dictOptions" :key="key" :label="key" :value="key">{{ item }}</el-radio-button>
  </el-radio-group>

  <el-select
    v-else-if="tagType=='list'"
    v-model="dictValue"
    :multiple="multiple"
    :clearable="isClearable"
    :placeholder="placeholder"
    :disabled="disabled"
    :size="selectSize"
    @change="handleInput">
    <el-option v-if="showSelectOption" label="" value="">请选择</el-option>
    <el-option v-for="(item, key) in dictOptions" :key="key" :label="item" :value="key">{{ item }}</el-option>
  </el-select>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'DictSelectTag',
  props: {
    dictCode: String, // 字典名称
    placeholder: String, // 提示句
    value: '', // 绑定的数据
    disabled: Boolean, // 是否禁用
    type: String, // 选择器类型
    size: String, // 大小
    showSelectOption: { // 是否需要顯示請選擇選項
      type: Boolean,
      default: true
    },
    isClearable: { // 是否需要清楚圖標
      type: Boolean,
      default: true
    },
    multiple: { // 是否多选
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dictOptions: [], // 字典数据
      tagType: '', // 选择器类型
      dictValue: '',
      selectSize: ''
    }
  },
  computed: {
    ...mapState(['dicts'])
  },
  watch: {
    dictCode: {
      immediate: true,
      handler() {
        this.initDictData()
      }
    },
    value(v) {
      this.dictValue = v
    }
  },
  created() {
    this.tagType = this.type
    this.dictValue = this.value ? this.value : ''
    this.selectSize = this.size ? this.size : 'small'
  },
  methods: {
    initDictData() { // 获取对应字典数据
      this.dictOptions = this.dicts.dicts[this.dictCode]
    },
    handleInput(e) {
      this.$emit('change', e)
    }
  }
}
</script>

// 使用方法
<dict-select-tag
    v-model="submitForm.tradeCpType"
    type="list"
    dict-code="CREDIT_SUBJECT"
    placeholder="请选择交易对手类型"
    :show-select-option="false"
    multiple
    style="width: 100%"
/>