Replacement data display problem in IView?

ask the Talbe component in IView to replace the data,

clipboard.png

you need to display the value "1 | 2" of the "gender" column as "male | female" respectively
here is the code:

<template>
    <tables ref="tables" v-model="usrListData" :columns="columns"/>
</template>
<script>
  data () {
    return {
      columns: [
        {title: "-sharp", key: "id"},
        {title: "", key: "sex"}
      ],
      usrListData: []
      },
  mounted: function () {
    getUsrList().then(res => {
        res.data.result.forEach((info, index) => {
            this.usrListData.push(res.data.result[index])
        })
    })
    }
</script>
Oct.21,2021

take a look at the document.
render custom rendering column, using the Render function of Vue. Pass in two parameters, the first is h, and the second is the object, including row, column, and index, respectively, referring to the current row data, the current column data, and the current row index, as shown in the example.

 columns: [
    {title: '-sharp', key: 'id'},
    {title: '', key: 'sex',render(h,params){
        let renderText = params.row.sex === 1? '' : ''
        // jsx
        return (<span>{renderText}</span>)
    }}
  ]
Menu