JvxeTable 如何将数字性别值转换为男女显示

在使用 JvxeTable 表格组件时，我们可能会遇到需要将数字性别值（如 1 或 2）转换为相应的文字表示（男或女）的情况。本文将介绍如何通过自定义渲染函数实现这一功能。

假设我们有以下代码，其中 cfXb 字段存储着性别值：

const patientColumns = ref([
  { title: '病人姓名', dataIndex: 'cfXm', key: 'cfXm' },
  { title: '性别', dataIndex: 'cfXb', key: 'cfXb' },
  { title: '年龄', dataIndex: 'cfAge', key: 'cfAge' },
  { title: '身份证', dataIndex: 'cfSfz', key: 'cfSfz' },
  { title: '疾病', dataIndex: 'cfJb', key: 'cfJb' },
  { title: '处方数', dataIndex: 'count', key: 'count' },
]);

<JVxeTable
  size="mini"
  resizable
  stripe
  clickSelectRow
  highlightCurrentRow
  :height="200"
  :columns="patientColumns"
  :dataSource="patientList"
  rowSelectionType="radio"
/>

如何将数字性别值转换为男女显示

您可以在 patientColumns 中的 dataIndex 属性后面添加一个自定义的渲染函数，用于将性别值转换为相应的文字表示。例如：

const patientColumns = ref([
  {
    title: '病人姓名',
    dataIndex: 'cfXm',
    key: 'cfXm'
  },
  {
    title: '性别',
    dataIndex: 'cfXb',
    key: 'cfXb',
    render: (text) => {
      return text === 1 ? '男' : '女';
    }
  },
  {
    title: '年龄',
    dataIndex: 'cfAge',
    key: 'cfAge'
  },
  {
    title: '身份证',
    dataIndex: 'cfSfz',
    key: 'cfSfz'
  },
  {
    title: '疾病',
    dataIndex: 'cfJb',
    key: 'cfJb'
  },
  {
    title: '处方数',
    dataIndex: 'count',
    key: 'count'
  },
]);

在上面的代码中，我们为性别列添加了一个渲染函数，根据 text 的值来判断是男还是女，并返回对应的文字表示。

这样，在 <JVxeTable> 组件中展示时，性别列的值会被转换成男女显示。

注意：

渲染函数接收一个参数 text，表示当前单元格的数据。
您可以根据需要自定义渲染函数，例如使用 switch 语句处理多种性别值。

希望这篇文章对您有所帮助。如果您有任何问题，请随时留言。