通过naive ui 生成表格

1. 设计一个管理员列表，通过分配不同权限给不用的用户，让用户登录系统之后看到的页面是根据管理员的分配的权限的不同可以展示的页面的数量也是不一样的

2. 使用h函数可以让表格中显示不一样的标签，例如超级管理员和普通管理员的样式进行判断
   title: "用户角色", key: "role", render(row) { return h( NTag, { type: row.role == 2 ? 'success' : 'info' }, { default: () => row.role == 2 ? "超级管理员" : "普通管理员" } ) } ,

3. 使用h函数编写表格中的操作功能，例如编辑、删除，如果点击了编辑，跳出一个弹出框提示是否删除该项，重点，此项操作运用了三层h函数，可以着重学习

 title: "操作",
        render: (row) => {
            return h(
                NSpace,
                {
                    style: { justifyContent: 'center' }
                },
                {
                    default: () => [
                        h(
                            NButton,
                            {
                                type: "info", onClick: () => { TreeModal.value = true, userinfo.value = row }
                            },
                            { default: () => "权限" }
                        ),
                        h(
                            NPopconfirm,
                            {
                                negativeText: "取消", positiveText: "确认", onPositiveClick: () => DeleteAdmin(row.adminid)
                            },
                            {
                                default: () => '你确定删除我吗？',
                                trigger: () => h(NButton,
                                    { type: "error" },
                                    { default: () => "删除" })

                            }
                        )
                    ]
                }
            )
        }
    }

完整代码如下：

<template>
    <div class="admin_list">
        <n-space vertical>
            <n-button type="info" @click="showModel">新增</n-button>
            <!-- 添加管理员 -->
            <n-modal v-model:show="Addshow" preset="dialog" title="添加管理员" positive-text="确认" negative-text="取消"
                @positive-click="submitCallback">
                <!-- 用户表单 -->
                <n-form ref="AddRef" label-placement="left" :label-width="70" :model="AddAdmin" :rules="Addrules">
                    <n-form-item label="用户名" path="user.name">
                        <n-input v-model:value="AddAdmin.user.name" placeholder="请输入用户名" />
                    </n-form-item>
                    <n-form-item label="密码" path="user.password">
                        <n-input v-model:value="AddAdmin.user.password" placeholder="请输入密码" />
                    </n-form-item>
                    <n-form-item label="用户角色" path="role">
                        <n-select v-model:value="AddAdmin.role" :options="Addoptions" />
                    </n-form-item>
                </n-form>
            </n-modal>

            <n-data-table :bordered="false" :single-line="false" :columns="columns" :data="Userdata"
                :pagination="pagination" :max-height="350" />

            <n-modal v-model:show="TreeModal" :mask-closable="false" preset="dialog" title="修改权限" positive-text="确定"
                negative-text="取消" @positive-click="UpdateTree" @negative-click="TreeModal = false">
                <!-- 权限树 -->
                <n-tree ref="TreeRef" block-line default-expand-all cascade checkable :data="Treedata"
                    :default-checked-keys="userinfo.checkedKeys" />
            </n-modal>
        </n-space>
    </div>
</template>

<script setup>
import { ref, onMounted, h } from 'vue';
import { AdminListApi, AddAdminApi, DeleteAdminApi, UpdateAdminApi } from '../../api/user'
import { NButton, useMessage, NTag, NPopconfirm, NSpace } from "naive-ui";
import routerAsync from '../../router/routerAsync.js'
const message = useMessage();

// 权限树的ref
const TreeRef = ref()
// 打开权限树管理模块
const TreeModal = ref(false)
// 设置权限的数据
const userinfo = ref({})
// 权限树数据
const Treedata = computed(() => {
    return CreateTree(routerAsync)
})
// 权限树处理
const CreateTree = (routerAsync) => {
    let data = routerAsync.map((item) => {
        if (item.children && item.children.length) {
            return {
                label: item.meta.label,
                key: item.name,
                children: CreateTree(item.children)
            }
        } else {
            return {
                label: item.meta.label,
                key: item.name,
            }
        }
    })
    return data
}
// 修改用户权限
const UpdateTree = async () => {
    // 将选中的key解构出来
    let { keys } = TreeRef.value.getCheckedData();
    // 将0-0去除
    keys = keys.filter((item) => item != '0-0')
    // 发送ajax请求
    const data = {
        adminname: userinfo.value.adminname,
        password: userinfo.value.password,
        role: userinfo.value.role,
        checkedKeys: keys,
    }
    let res = await UpdateAdminApi(data)
    if (res.code) {
        message.success(res.message)
        userAdminList()
    } else {
        message.error(res.message)
    }
}


// 添加ref
const AddRef = ref(null)


// 添加管理员信息
const AddAdmin = ref(
    {
        user: {
            name: "",
            password: "",
        },
        role: 1,
    }
)
// 添加管理员规则
const Addrules = {
    user: {
        name: {
            required: true,
            validator(rules, value) {
                if (!value) {
                    return new Error("用户名不能为空")
                } else {
                    const reg = /^\w{3,15}$/
                    if (!reg.test(value)) {
                        return new Error("用户名在3~15位")
                    }
                }
            },
            trigger: "blur"
        },
        password: {
            required: true,
            validator(rules, value) {
                if (!value) {
                    return new Error("密码不能为空")
                } else {
                    const reg = /^\w{6,15}$/
                    if (!reg.test(value)) {
                        return new Error("密码在在6~15位")
                    }
                }
            },
            trigger: "blur"
        },
    }
}

// 用户角色选择
const Addoptions = [
    {
        label: '普通管理员',
        value: 1
    },
    {
        label: '超级管理员',
        value: 2
    },
]

// 显示添加管理员
const Addshow = ref(false)

// 打开模态框
const showModel = () => {
    Addshow.value = true
}
// 添加管理员请求

const AddUser = async () => {
    const data = {
        adminname: AddAdmin.value.user.name,
        password: AddAdmin.value.user.password,
        role: AddAdmin.value.role,
        checkedKeys: []
    }
    const res = await AddAdminApi(data)
    if (res.code == '200') {
        message.success(res.message)
        // 清空表单
        AddAdmin.value.user.name = "";
        AddAdmin.value.user.password = "";
        AddAdmin.value.role = 1;
    } else {
        message.error(res.message)
    }
    // console.log(res);
}

// 确认添加
const submitCallback = () => {
    AddRef.value.validate((errors) => {
        if (!errors) {
            // 发送ajax
            AddUser();
            userAdminList();
        } else {
            message.error("添加失败")
        }
    })
}
// 分页
const pagination = reactive({
    page: 1,
    pageSize: 5,
    showSizePicker: true,
    pageSizes: [5, 7, 10],
    onChange: (page) => {
        pagination.page = page
    },
    onUpdatePageSize: (pageSize) => {
        pagination.pageSize = pageSize
        pagination.page = 1
    }
})
// 列
const columns = [
    {
        title: "No",
        key: "index"
    },
    {
        title: "用户名",
        key: "adminname"
    },
    {
        title: "用户角色",
        key: "role",
        render(row) {
            return h(
                NTag,
                {
                    type: row.role == 2 ? 'success' : 'info'
                },
                {
                    default: () => row.role == 2 ? "超级管理员" : "普通管理员"
                }
            )
        }
    },
    {
        title: "操作",
        render: (row) => {
            return h(
                NSpace,
                {
                    style: { justifyContent: 'center' }
                },
                {
                    default: () => [
                        h(
                            NButton,
                            {
                                type: "info", onClick: () => { TreeModal.value = true, userinfo.value = row }
                            },
                            { default: () => "权限" }
                        ),
                        h(
                            NPopconfirm,
                            {
                                negativeText: "取消", positiveText: "确认", onPositiveClick: () => DeleteAdmin(row.adminid)
                            },
                            {
                                default: () => '你确定删除我吗？',
                                trigger: () => h(NButton,
                                    { type: "error" },
                                    { default: () => "删除" })

                            }
                        )
                    ]
                }
            )
        }
    }
];

const Userdata = ref([])


// 管理员列表
const userAdminList = async () => {
    const res = await AdminListApi()
    Userdata.value = res.data.map((item, index) => {
        return {
            ...item,
            index: index + 1
        }
    })
}
// 删除管理员
const DeleteAdmin = async (adminid) => {
    // console.log(adminid);
    let res = await DeleteAdminApi({ adminid })
    if (res.code) {
        message.success(res.message)
    } else {
        message.error(res.message)
    }
    userAdminList()
}

onMounted(async () => {
    await userAdminList()

})
</script>

<style lang="scss" scoped>
.admin_list {
    height: 100%;



    :deep(.n-data-table .n-data-table-th, .n-data-table .n-data-table-td) {
        text-align: center;
    }

    :deep(.n-data-table .n-data-table-td) {
        text-align: center;
    }
}
</style>