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

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

{{ displayRank }}

computed: {
    // 获取职级名称
    displayRank() {
      let lable = ''
      this.companyTypeList.forEach(item => {
        if (item.value === this.formData.rank) {
          lable = item.label
        }
      })
      return lable
    }
  }
2、通过filter
{{ formData.personType|getPersonType }}

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
            )
          }
        }
]
4、列表页通过filter


                      slot="rank"
            slot-scope="{ row }"
          >
           
{{ row.rank|getRank }}

         

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

你可能感兴趣的:(笔记,vue)