阅读时间:1 分钟
0 字
开发说明
后台页面推荐使用 Dux 组件组合。
表格页面示例
vue
<script setup lang="ts">
import type { TableColumn } from '@duxweb/dvha-naiveui'
import { DuxTablePage, useAction, useTableColumn } from '@duxweb/dvha-pro'
const action = useAction()
const column = useTableColumn()
const columns: TableColumn[] = [
{ title: 'ID', key: 'id', width: 80 },
{ title: '昵称', key: 'nickname' },
{
title: '状态',
key: 'status',
render: column.renderSwitch({ key: 'status' }),
},
{
title: '操作',
key: 'action',
render: action.renderTable({
items: [
{ label: '编辑', type: 'modal', component: () => import('./form.vue') },
{ label: '删除', type: 'delete', path: 'system/user' },
],
}),
},
]
</script>
<template>
<DuxTablePage path="system/user" :columns="columns" />
</template>常用布局
DuxPage+DuxPageHeader+DuxPageBodyDuxCard/DuxCollapsePanelDuxListEmpty