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>)
    }}
  ]
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3ac31-2c230.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3ac31-2c230.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?