阅读时间:1 分钟
0 字
表格设计
DuxTablePage 是后台列表的主入口,内置分页、筛选、操作区等。
vue
<script setup lang="ts">
import type { JsonSchemaNode } from '@duxweb/dvha-core'
import { DuxTablePage } from '@duxweb/dvha-pro'
import { ref } from 'vue'
const filter = ref({})
const filterSchema: JsonSchemaNode[] = [
{
tag: 'n-input',
name: 'keyword',
attrs: { 'placeholder': '搜索', 'v-model:value': [filter.value, 'keyword'] },
},
]
const tabs = [
{ label: '全部', value: '0' },
{ label: '启用', value: '1' },
{ label: '禁用', value: '2' },
]
</script>
<template>
<DuxTablePage
path="system/user"
:filter="filter"
:filter-schema="filterSchema"
:tabs="tabs"
/>
</template>