naive ui 表格中使用NA

在 Naive UI 中，要在表格中使用 NA（Not Available）来表示缺失的数据，可以通过在对应的单元格中插入一个文本或者图标来表示。以下是一个使用 NA 的简单示例：

<template>
  <naive-table :data="tableData">
    <naive-table-column label="姓名" prop="name"></naive-table-column>
    <naive-table-column label="年龄" prop="age"></naive-table-column>
    <naive-table-column label="性别" prop="gender"></naive-table-column>
    <naive-table-column label="邮箱" prop="email"></naive-table-column>
  </naive-table>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const tableData = ref([
      { name: '张三', age: 25, gender: '男', email: 'zhangsan@example.com' },
      { name: '李四', age: null, gender: '女', email: 'lisi@example.com' },
      { name: '王五', age: 30, gender: '男', email: null },
    ]);

    return {
      tableData,
    };
  },
};
</script>

在上面的示例中，如果某个单元格的数据为空，可以将其设置为 null 或者 undefined，Naive UI 会自动将其显示为 NA。你也可以自定义 NA 的显示方式，比如使用特定的文本或者图标来代替。