naive-ui 之 数据表格（n-data-table）与 渲染函数（h函数）

一、效果图

二、数据表代码

1. 数据表组件

<!--数据表组件-->
<n-data-table :columns="columns" :data="data" />

2. 数据表列

🔊 NaiveUI 自定义 “状态” 与 “操作”

• columns
  

  //数据表列
  let columns= [
      {
          title: "ID",
          key: "id",
          fixed: "left"
      },
      {
          title: "角色名称",
          key: "name"
      },
      {
          title: "说明",
          key: "description"
      },
      {
          title: "下属管理员",
          key: "admin"
      },
      {
          title: "状态",
          key: "status",
          width: 80,
          fixed: "right",
          render(row, index) {
              return h(NTag, {
                  bordered: false,
                  type: (row.status.key == 1 ? 'success' : 'error')
              }, {
                  default: () => row.status.value
              });
          }
      },
      {
          title: "创建时间",
          key: "create_time",
          width: 150
      },
      {
          title: "操作",
          key: "opt",
          width: 150,
          fixed: "right",
          render(row, index) {
              return [
                  h(NButton, {
                      quaternary: true,
                      type: 'info',
                      size: 'small',
                      onClick: () => {
                          openEdit(row)
                      }
                  }, {
                      default: () => '编辑'
                  }),
                  h(NButton, {
                      quaternary: true,
                      type: 'error',
                      size: 'small',
                      style: { marginLeft: '2px' },
                      onClick: () => {
                          _doDelete(row.id)
                      }
                  }, {
                      default: () => '删除'
                  })
              ]
          }
      }
  ];

• data

  let data = [
    {
      "id": 1,
      "name": "超级管理员",
      "description": "超级管理员拥有对操作系统文件的完全控制权。",
      "create_time": "2024-02-04 10:21:15",
      "update_time": "2024-02-04 10:21:15",
      "status": {
        "key": 1,
        "value": "正常"
      },
      "delete_time": 0,
      "admin": [
        {
          "id": 10000,
          "role_id": 1,
          "avatar": "https://xxxxxx.coom/avatar/65d3f36081668.webp",
          "name": "admin"
        }
      ]
    },
    {
      "id": 7,
      "name": "普通管理员",
      "description": "拥有部分对系统操作权限。",
      "create_time": "2024-02-04 10:21:15",
      "update_time": "2024-03-10 19:59:12",
      "status": {
        "key": 1,
        "value": "正常"
      },
      "delete_time": 0,
      "admin": [
        {
          "id": 10001,
          "role_id": 7,
          "avatar": "https://xxxxxx.coom/avatar/65ed116eb4ab7.webp",
          "name": "咖啡豆"
        },
        {
          "id": 10003,
          "role_id": 7,
          "avatar": "https://xxxxxx.coom/avatar/65ed752fadebd.webp",
          "name": "卡布奇诺"
        },
        {
          "id": 10004,
          "role_id": 7,
          "avatar": "https://xxxxxx.coom/avatar/65ed7755c3517.webp",
          "name": "香草拿铁"
        },
        {
          "id": 10006,
          "role_id": 7,
          "avatar": "https://xxxxxx.coom/avatar/65f39852d30db.webp",
          "name": "冰摩卡"
        }
      ]
    },
    {
      "id": 11,
      "name": "测试人员",
      "description": "仅在测试任务部分有权限。",
      "create_time": "2024-03-10 20:11:35",
      "update_time": "2024-03-10 20:56:34",
      "status": {
        "key": 1,
        "value": "正常"
      },
      "delete_time": 0,
      "admin": [
        {
          "id": 10005,
          "role_id": 11,
          "avatar": "https://xxxxxx.coom/avatar/65edaefd0dea2.webp",
          "name": "焦糖玛奇朵"
        }
      ]
    }
  ]

3. NaiveUI自定义“头像组”

NaiveUI头像组示例代码

<template>
  <n-avatar-group :options="options" :size="40" :max="3">
    <template #avatar="{ option: { name, src } }">
      <n-tooltip>
        <template #trigger>
          <n-avatar :src="src" />
        </template>
        {{ name }}
      </n-tooltip>
    </template>
    <template #rest="{ options: restOptions, rest }">
      <n-dropdown :options="createDropdownOptions(restOptions)" placement="top">
        <n-avatar>+{{ rest }}</n-avatar>
      </n-dropdown>
    </template>
  </n-avatar-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    return {
      options: [
        {
          name: '张三',
          src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
        },
        {
          name: '李四',
          src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
        },
        {
          name: '王五',
          src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
        },
        {
          name: '赵六',
          src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
        },
        {
          name: '七仔',
          src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
        }
      ],
      createDropdownOptions: (options: Array<{ name: string; src: string }>) =>
        options.map((option) => ({
          key: option.name,
          label: option.name
        }))
    }
  }
})
</script>

把上面模板语法转换成渲染函数，再结合数据表

//数据表列
let columns= [
    {
        title: "ID",
        key: "id",
        fixed: "left"
    },
    {
        title: "角色名称",
        key: "name"
    },
    {
        title: "说明",
        key: "description"
    },
    {
        title: "下属管理员",
        key: "admin",
        render(row){
            let options = row.admin.map(item => {
                return {
                    name: item.name,
                    src: item.avatar
                };
            });
            if(options.length > 0){
                return h(NAvatarGroup, {
                    options: options,
                    size: 40,
                    max: 3
                },{
                    avatar: ({ option: { name, src } }) => h(NTooltip,null, {
                            default:() => name,
                            trigger: () => h(NAvatar, {
                                src: src
                            })
                        }),
                    rest: ({ options: restOptions, rest }) => h(NDropdown, {
                        options: createDropdownOptions(restOptions)
                    }, {
                        default: () => h(NAvatar, null, {
                            default: () => `+${rest}`
                        })
                    })
                })
            } else {
                return '-';
            }
        }
       },
    {
        title: "状态",
        key: "status",
        width: 80,
        fixed: "right",
        render(row, index) {
            return h(NTag, {
                bordered: false,
                type: (row.status.key == 1 ? 'success' : 'error')
            }, {
                default: () => row.status.value
            });
        }
    },
    {
        title: "创建时间",
        key: "create_time",
        width: 150
    },
    {
        title: "操作",
        key: "opt",
        width: 150,
        fixed: "right",
        render(row, index) {
            return [
                h(NButton, {
                    quaternary: true,
                    type: 'info',
                    size: 'small',
                    onClick: () => {
                        openEdit(row)
                    }
                }, {
                    default: () => '编辑'
                }),
                h(NButton, {
                    quaternary: true,
                    type: 'error',
                    size: 'small',
                    style: { marginLeft: '2px' },
                    onClick: () => {
                        _doDelete(row.id)
                    }
                }, {
                    default: () => '删除'
                })
            ]
        }
    }
];