用Vue渲染函数渲染NaiveUI数据表+头像组

效果图



数据表代码

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

数据表列

//数据表列
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: () => '删除'
                })
            ]
        }
    }
];

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": "焦糖玛奇朵"
      }
    ]
  }
]

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: () => '删除'
                })
            ]
        }
    }
];

就可以了