【Ant Design Vue V3版本填坑记录二】Table 组件 column.customRender 报错

const data = reactive([{
  tid: 1,
  tname: "Magnum",
  tgender: 0,
  tage: 23
}])

const columns = reactive([{
  dataIndex: 'tid',
  title: "序号",
  align: "center"
}, {
  dataIndex: 'tname',
  title: "姓名",
  align: "center"
}, {
  dataIndex: 'tgender',
  title: "性别",
  align: "center",
  customRender: (text, record) => {
    return <span>{ record.tgender === 0 ? '男' : '女' }</span>
  }   
}, {
  dataIndex: 'tage',
  title: "年龄",
  align: "center"
}, {
  dataIndex: 'operation',
  title: "操作",
  align: "center",
}])

const columns = reactive([{
  dataIndex: 'tid',
  title: "序号",
  align: "center"
}, {
  dataIndex: 'tname',
  title: "姓名",
  align: "center"
}, {
  dataIndex: 'tgender',
  title: "性别",
  align: "center",
  customRender:({text, record, index}) => {
    console.log(text, record, index)
    return record.tgender === 0 ? '男' : '女'
  },  
}, {
  dataIndex: 'tage',
  title: "年龄",
  align: "center"
}, {
  dataIndex: 'operation',
  title: "操作",
  align: "center",
}])