Vue中键值对映射取值方法总结

1、显示某值对应的名称
通过计算属性，常用详细显示key对应的value值

<div>{{ displayRank }}</div>
computed: {
    // 获取职级名称
    displayRank() {
      let lable = ''
      this.companyTypeList.forEach(item => {
        if (item.value === this.formData.rank) {
          lable = item.label
        }
      })
      return lable
    }
  }
2、通过filter
<div>{{ formData.personType|getPersonType }}</div>
filters: {
getPersonType(type) {
      const map = new Map([
        ['2', '管理人员'],
        ['4', '工人'],
        ['3', '专业技术人员']
      ])
      return map.get(type)
    }
}
3、列表页通过render
columns：[{
          title: '机构类别',
          key: 'companyType',
          tooltip: true,
          align: 'center',
          render: (h, params) => {
            let sum = params.row.companyType
            let state
            switch (parseInt(sum)) {
              case 0:
                state = '政府机构'
                break
              case 1:
                state = '非政府机构'
                break
              default:
                break
            }
            return h(
              'span',
              {
                attrs: {
                  value: state
                }
              },
              state
            )
          }
        }
]

简化写法：

render: (h, params) => {
  let type= params.row.companyType
  return h('span', {}, this.typeList[parseInt(type) + 1].label) // 数组正常
  // return h('span', {}, this.typeMap.get(type)  定义常量Map直接map.get(type)
}

4、列表页通过filter

<Table border :columns="columnsList" :data="rowData" @on-row-dblclick="handleRowClick">
          <template
            slot="rank"
            slot-scope="{ row }"
          >
            <div>{{ row.rank|getRank }}</div>
          </template>
</Table>
filters: {
    getRank(type) {
      const map = new Map([
        ['1', '办事员'],
        ['2', '科员'],
        ['3', '副乡科级'],
        ['4', '正乡科级'],
        ['5', '副县处级'],
        ['6', '正县处级'],
        ['7', '副厅局级'],
        ['8', '正厅局级'],
        ['9', '副省部级'],
        ['10', '正省部级'],
        ['11', '副国级'],
        ['12', '正国级']
      ])
      return map.get(type)
    }
  }
5、后端接口获取字典或者列表数据，vue中封map，前端列表render渲染字段，也可以用上面的filter
<script>
let rankMap = {}

<script>

columns:[
{
          title: '任/免职级',
          key: 'rank',
          minWidth: 90,
          tooltip: true,
          align: 'center',
          render: (h, params) => {
            debugger
            let state = rankMap[params.row.rank]
            return h(
              'span',
              {
                attrs: {
                  value: state
                }
              },
              state
            )
          }
        }
]

methods: {

// 获取职级
    _getPositionDatas() {
      let param = {
        salaryType: '1'
      }
      Api.getRankList(param).then(res => {
        this.positionTypeList = res
        res.forEach(item => {
          rankMap[item.value] = item.label
        })
      }).catch(error => {
        console.log(error)
      })
    },
mounted() {
    this._getPositionDatas()
  }
/**
filters: {
    getRank(type) {   
      return rankMap.get(type)
    }
**/
  } 

}
6、后端数据库方法封装，
/***根据字典CODE和值取字典名称，参数paramCode字典分类编码，参数itemValue字典值***/
CREATE OR REPLACE FUNCTION "DB_GSODS_GOVC_LGSMG"."findConfigValue"("paramCode" IN VARCHAR2(50),"itemValue" IN VARCHAR2(100))
RETURN VARCHAR2(100)

AS
        /*返回字典配置值名称*/
        itemName varchar2;
BEGIN
        /*执行体*/
        select min(T.ITEMNAME) into itemName
    from T_SYS_PARAM_ITEM T where PARAM_CODE = paramCode
    and T.ITEMVAL = itemValue
    and T.DEL_FLAG = '0';
    return itemName;

END;
select findConfigValue('RZZT',T.TENURE_STATUS) as "任职状态" from T_HRM_SERVANT_APPOINT_INFO T;