vue3+naive ui 数据表格的运用(h函数)
html中
<n-data-table :bordered="false" :single-line="false" :columns="columns" :data="Userdata"
:pagination="pagination" />
js中
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: () => play(row)
},
{ default: () => "权限" }
),
h(
NPopconfirm,
{ negativeText: "取消", positiveText: "确认", showIcon: "false" },
{
default: () => '你确定删除我吗?',
trigger: () => h(NButton,
{ type: "error" },
{ default: () => "删除" })
}
)
]
}
)
}
}
];
const Userdata = ref([])
//发送ajax请求 并将请求的数据赋值给Userdata
// 获取管理员列表
const userAdminList = async () => {
const res = await AdminListApi()
console.log(res.data);
//给每条数据添加序号
Userdata.value = res.data.map((item, index) => {
return {
...item,
index: index + 1
}
})
console.log(Userdata.value);
}