current position:Home>Summary method of Vue value in key pair mapping

Summary method of Vue value in key pair mapping

2022-04-29 09:01:31How is waste wood developed

1、 Displays the name of a value
By calculating properties , Common detailed display key Corresponding value value

<div>{ { displayRank }}</div>
computed: {
    // Get rank name
    displayRank() {
      let lable = ''
      this.companyTypeList.forEach(item => {
        if (item.value === this.formData.rank) {
          lable = item.label
        }
      })
      return lable
    }
  }
2、 adopt filter
<div>{ { formData.personType|getPersonType }}</div>
filters: {
getPersonType(type) {
      const map = new Map([
        ['2', ' Management '],
        ['4', ' Worker '],
        ['3', ' Professional and technical personnel ']
      ])
      return map.get(type)
    }
}
3、 List page through render
columns:[{
          title: ' Organization type ',
          key: 'companyType',
          tooltip: true,
          align: 'center',
          render: (h, params) => {
            let sum = params.row.companyType
            let state
            switch (parseInt(sum)) {
              case 0:
                state = ' government organs '
                break
              case 1:
                state = ' NGOs '
                break
              default:
                break
            }
            return h(
              'span',
              {
                attrs: {
                  value: state
                }
              },
              state
            )
          }
        }
]

Simplify writing :

render: (h, params) => {
  let type= params.row.companyType
  return h('span', {}, this.typeList[parseInt(type) + 1].label) //  The array is normal 
  // return h('span', {}, this.typeMap.get(type)   Define constants Map direct map.get(type)
}

4、 List page through 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', ' The clerk '],
        ['2', ' Clerk '],
        ['3', ' Deputy Township section level '],
        ['4', ' Zhengxiang section level '],
        ['5', ' Deputy county level '],
        ['6', ' County level '],
        ['7', ' Vice office level '],
        ['8', ' Main hall bureau level '],
        ['9', ' Deputy provincial and ministerial level '],
        ['10', ' At the provincial and ministerial level '],
        ['11', ' Deputy state level '],
        ['12', ' Zhengguo class ']
      ])
      return map.get(type)
    }
  }
5、 The back-end interface obtains dictionary or list data ,vue Middle seal map, Front end list render Render fields , You can also use the above filter
<script>
let rankMap = {}

<script>

columns:[
{
          title: ' ren / Removal grade ',
          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: {

// Get rank
    _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、 Backend database method encapsulation ,
/*** According to the dictionary CODE And the value takes the dictionary name , Parameters paramCode Dictionary classification code , Parameters itemValue The dictionary is worth ***/
CREATE OR REPLACE FUNCTION "DB_GSODS_GOVC_LGSMG"."findConfigValue"("paramCode" IN VARCHAR2(50),"itemValue" IN VARCHAR2(100))
RETURN VARCHAR2(100)

AS
        /* Returns the dictionary configuration value name */
        itemName varchar2;
BEGIN
        /* Executor */
        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 " Employment status " from T_HRM_SERVANT_APPOINT_INFO T;

copyright notice
author[How is waste wood developed],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290626303762.html

Random recommended