vue项目字典管理

优点：在下拉框数据及列表中下拉类型的数据发生变化时，不用手动一个一个去改动，只需要在字典管理中同步管理即可。

---

1. 首先对字典查询进行管理
   
   这里涉及的增删改查就不一一阐述了

2. 这里以业务类型的数据为例
   

3. 先引入字典管理的接口(下拉框)

import {
    
    getByType} from 'api/manage/dict.js';

4. 获取业务类型数据

<el-form-item prop="bizType" label="业务类型">
      <el-select v-model="listQuery.bizType" clearable class="filter-item" placeholder="请选择业务类型">
            <el-option
                  v-for="item in bizTypeOptions"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key">
             </el-option>
      </el-select>
</el-form-item>

// 业务类型
const bizTypeStatus = []
export default {
    
    
      data(){
    
    
         return {
    
    
             dictList:null,
             listQuery: {
    
    
                    bizType: null,
                },
              bizTypeOptions:[], 
         }    
      },
      methods:{
    
    
          /**获取字典*/
            getDict(query) {
    
    
                getByType(query).then(response => {
    
    
                    if (response.data.code === 1) {
    
    
                    let dictStr = query.type.split(",");

                    for(let y=0;y<dictStr.length;y++){
    
    
                        if (response.data.result.business_type != null && dictStr[y] == 'business_type') {
    
    
                            this.dictList = response.data.result.business_type;
                            for(var i=0;i<this.dictList.length;i++){
    
    
                                this.bizTypeOptions.push({
    
    
                                    label:this.dictList[i].label,
                                    key:this.dictList[i].value
                                });
                                //过滤
                                const key = this.dictList[i].value;
                                const label = this.dictList[i].label;
                                bizTypeStatus[key] = label;
                            }
                        }
                    }
                    this.getList()
                }else {
    
    
                    this.$message({
    
    
                        title: '失败', message: response.data.message, type: 'error', duration: 2000
                    });
                }
            }).catch(() => {
    
    
            });
            },
      }
}

5. 表格业务类型数据处理

<el-table-column label="业务类型">
      <template slot-scope="scope">
             <span>{
   
   {scope.row.bizType | bizTypeFilter}}</span>
      </template>
</el-table-column>

filters:{
    
    
            bizTypeFilter(status){
    
    
                return bizTypeStatus[status]
            },
        },