前言：為了減少發(fā)送請求次數(shù)，字典數(shù)據(jù)統(tǒng)一放入到vuex管理

vuex封裝字典管理

// dict.js
// 請求字典的封裝方法
import { getDicts } from "@/api/system/dict/data";

const getDefaultState = () => {
  return {
// 存儲格式
//{
//  approveState:[{DataValue:1,DataText:'待審批'},{DataValue:2,DataText:'審批中'}],
//  enableState:[{DataValue:1,DataText:'可用'},{DataValue:2,DataText:'禁用'}],
//  ...
//}
    // 字典map 
    dictMap: {}
  }
}

const state = getDefaultState()

const mutations = {
  // 保存字典項
  SAVE_DICT_ITEM: (state, data) => {
    let obj = {}
    obj[data.dictKey] = data
    // 需要拷貝一份，要不然數(shù)據(jù)變動監(jiān)聽不到
    state.dictMap = Object.assign({}, state.dictMap, obj)
  }
}

const actions = {
  // 獲取字典的action
  getByDictKey({ commit }, data) {
    if(!data.dictKey) return
    return new Promise((resolve, reject) => {
      if (state.dictMap[data.dictKey]) {
        resolve()
      } else {
        // 根據(jù)字典類型請求后臺數(shù)據(jù)
        getDicts(data.dictKey).then((res) => {
          commit('SAVE_DICT_ITEM', {
            dictKey: data.dictKey,
            items: res.Data
          })
          resolve()
        })
      }
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

//getter獲取字典map
const getters = {
  subName: state => state.user.subName,
  dictMap: state => state.dict.dictMap
}
export default getters

select下拉框使用

import { mapGetters } from 'vuex'
created() {
     // 初始化數(shù)據(jù)，根據(jù)字典類型請求后臺，獲取下拉框列表
    if (!this.dictMap['sys_normal_disable']) {
      this.$store.dispatch('dict/getByDictKey', {
        dictKey: 'sys_normal_disable'
      })
    }
  },
computed: {
    ...mapGetters([
      'dictMap'
    ]),
    statusOptions(){  // getter獲取下拉列表
      return this.dictMap['sys_normal_disable'] && this.dictMap['sys_normal_disable'].items
    }
  },
// 頁面下拉框使用
<el-select
          v-model="queryParams.Search.Status"
          placeholder="角色狀態(tài)"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.DataValue"
            :label="dict.DataText"
            :value="dict.DataValue"
          />
        </el-select>

通過字典key顯示對應的文字，封裝全局組件DictTag.vue

<template>
  <div>
    <slot v-bind:dict="dict">
      <span v-for="item in dict.items" :key="item.DataValue">
        <template v-if="istag=='no'">
          <span v-if="item.DataValue == value">{{ item.DataText }}</span>
        </template>
        <template v-else>
          <el-tag :type="item.ListClass == 'primary' ? '' : item.ListClass" size="small" v-if="item.DataValue == value">{{ item.DataText }}</el-tag>
        </template>
      </span>
    </slot>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: "DictTag",
  props: {
    // 字典唯一編碼(表名_字段名)
    dictKey: {
      type: String,
      default: undefined
    },
    value: [String,Number, Array],
    istag:{
      type:String,
      default:'yes'
    }
  },
  created() {
    if (!this.dictMap[this.dictKey]) {
      this.$store.dispatch('dict/getByDictKey', {
        dictKey: this.dictKey,
        type: this.type
      })
    }
  },
  computed: {
    ...mapGetters([
      'dictMap'
    ]),
    // 當前字典
    dict() {
      return this.dictMap[this.dictKey] || {}
    }
  },
};
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>

//main.js 注冊全局組件
import DictTag from '@/components/DictTag'
Vue.component('DictTag', DictTag)

// 頁面使用，傳遞參數(shù)（值，字典類型）
<dict-tag v-model="scope.row.ApprovalStatus" dict-key="applyStatus"></dict-tag>

el.png

// 純文本顯示，配置istag
<dict-tag v-model="item.BadType" dict-key="quality_mrb_MrbBadType" istag="no"/>

wenziC.png