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

怕瓦落地_

已于 2024-03-18 01:05:19 修改

阅读量1k

点赞数 8

分类专栏： vue3 naive ui 文章标签： vue.js 前端

于 2024-03-18 01:04:48 首次发布

本文链接：https://blog.csdn.net/weixin_38181517/article/details/136738614

版权

效果图

数据表代码

<!--数据表组件-->
<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