最佳实践

面向中后台的推荐组合：Layout 壳子 + Form 录入 + Table 列表。

Layout + Form + Table

侧栏导航、顶栏标题、主区表单筛选与表格列表是最常见的页面骨架。下面示例展示三者如何拼在一起（精简数据，便于文档演示）。

• 用户
• 设置

用户管理

姓名

角色

姓名	角色	城市
张三	admin	上海
李四	member	杭州
王五	member	北京

<script setup>
import { computed, reactive, ref } from 'vue'
import {
  DanAside,
  DanButton,
  DanForm,
  DanFormItem,
  DanHeader,
  DanInput,
  DanLayout,
  DanMain,
  DanMenu,
  DanMenuItem,
  DanSelect,
  DanTable,
} from '@dandan-ui/ui'

const active = ref('users')
const query = reactive({ keyword: '', role: '' })

const columns = [
  { prop: 'name', label: '姓名', minWidth: 100 },
  { prop: 'role', label: '角色', width: 100 },
  { prop: 'city', label: '城市', minWidth: 100 },
]

const allRows = [
  { id: 1, name: '张三', role: 'admin', city: '上海' },
  { id: 2, name: '李四', role: 'member', city: '杭州' },
  { id: 3, name: '王五', role: 'member', city: '北京' },
]

const roleOptions = [
  { label: '全部', value: '' },
  { label: '管理', value: 'admin' },
  { label: '成员', value: 'member' },
]

const rows = computed(() =>
  allRows.filter((row) => {
    const hitKeyword = !query.keyword || row.name.includes(query.keyword.trim())
    const hitRole = !query.role || row.role === query.role
    return hitKeyword && hitRole
  }),
)

function reset() {
  query.keyword = ''
  query.role = ''
}
</script>

<template>
  <div style="height: 420px; border: 1px solid var(--dan-color-border)">
    <DanLayout style="height: 100%">
      <DanAside width="160px">
        <DanMenu v-model="active" style="border-right: 0">
          <DanMenuItem index="users">用户</DanMenuItem>
          <DanMenuItem index="settings">设置</DanMenuItem>
        </DanMenu>
      </DanAside>
      <DanLayout>
        <DanHeader height="48px">
          <strong>用户管理</strong>
        </DanHeader>
        <DanMain style="padding: 16px; overflow: auto">
          <DanForm
            :model="query"
            label-width="48px"
            style="
              display: flex;
              flex-wrap: wrap;
              gap: 8px 16px;
              align-items: flex-end;
              margin-bottom: 12px;
            "
          >
            <DanFormItem label="姓名">
              <DanInput
                v-model="query.keyword"
                placeholder="搜索姓名"
                clearable
                style="width: 160px"
              />
            </DanFormItem>
            <DanFormItem label="角色">
              <DanSelect
                v-model="query.role"
                :options="roleOptions"
                style="width: 120px"
              />
            </DanFormItem>
            <DanFormItem>
              <DanButton @click="reset">重置</DanButton>
            </DanFormItem>
          </DanForm>
          <DanTable :columns="columns" :data="rows" border stripe />
        </DanMain>
      </DanLayout>
    </DanLayout>
  </div>
</template>

表单建议

• 用 DanForm + DanFormItem 统一校验与禁用态，控件尽量走 v-model。
• 复杂录入优先复用现有字段组件（DatePicker / Cascader / Transfer），避免在业务侧自造面板。
• 提交前调用 formRef.validate()；异步提交时用按钮 loading 防重复。

表格建议

• 列定义放在 columns 数组，筛选与排序交给 Table 内置能力。
• 大数据量再评估虚拟滚动或分页；当前请优先 DanPagination 控制页码。
• 行内操作（编辑 / 删除）放在自定义列 slot，避免把业务逻辑塞进表格组件本身。

浮层建议

• Dialog / Drawer 已启用焦点陷阱：打开后 Tab 循环在面板内，关闭后焦点回到触发元素。
• 需要确认的破坏性操作优先 MessageBox；轻量提示用 Message / Notification。