标准 CRUD 列表

中后台出现频率最高的页面形态：筛选区 + 数据表格 + 行操作 + 弹窗表单 + 导入导出。此示例把各业务组件串成完整闭环 —— 筛选回第一页、翻页带条件、列设置控制可见列、新建/编辑/删除/批量删除/导入全部真实可交互（内存 mock，模拟 300ms 服务端延迟）。

在全屏示例中心打开「CRUD 列表」

在线预览

试试：输入关键词回车查询、勾选多行批量删除、工具栏「列设置」隐藏列、「导入 / 导出」面板选文件或导出、行内「编辑」改手机号（格式非法会被表单拦截）。

暂无数据

共 0 条

<template>
  <div class="ml-page">
    <eb-page-header title="会员管理" subtitle="统一维护会员档案、等级与状态">
      <template #actions>
        <eb-button size="small" @click="handleRefresh">
          <eb-icon name="refresh" :size="14" />
          刷新
        </eb-button>
      </template>
    </eb-page-header>

    <eb-section-card class="ml-card">
      <!-- 筛选区（SearchFilter 自带外框，无需再加分隔线） -->
      <eb-search-filter
        v-model="query"
        :fields="filterFields"
        :loading="loading"
        @search="onSearch"
      />

      <!-- 列表区 -->
      <eb-data-table
        ref="tableRef"
        title="会员列表"
        selectable
        show-index
        :operations-width="120"
        :loading="loading"
        :columns="visibleColumns"
        :data="rows"
        v-model:page="page"
        v-model:page-size="pageSize"
        :total="total"
        @page-change="load"
        @selection-change="onSelectionChange"
      >
        <template #toolbar>
          <eb-button type="primary" size="small" @click="openCreate">
            <eb-icon name="plus" :size="14" />
            新建会员
          </eb-button>
          <eb-button size="small" :disabled="!selection.length" @click="batchRemove">
            批量删除{{ selection.length ? `（${selection.length}）` : '' }}
          </eb-button>
          <eb-button size="small" @click="ioVisible = true">
            <eb-icon name="swap" :size="14" />
            导入 / 导出
          </eb-button>
          <eb-column-settings v-model="visibleProps" :columns="settingColumns" button-text="列设置" />
        </template>

        <template #level="{ row }">
          <eb-tag :type="row.level === 'platinum' ? 'primary' : row.level === 'gold' ? 'warning' : 'info'" effect="plain">
            {{ LEVEL_LABEL[row.level] }}
          </eb-tag>
        </template>

        <template #balance="{ row }">
          <span class="ml-money">¥{{ row.balance.toLocaleString() }}</span>
        </template>

        <template #status="{ row }">
          <eb-status-tag :value="row.status" :statuses="MEMBER_STATUS" />
        </template>

        <template #operations="{ row }">
          <eb-button text type="primary" size="small" @click="openEdit(row)">编辑</eb-button>
          <eb-popconfirm title="删除后不可恢复，确认删除该会员？" icon-type="danger" @confirm="removeOne(row)">
            <eb-button text type="danger" size="small">删除</eb-button>
          </eb-popconfirm>
        </template>
      </eb-data-table>
    </eb-section-card>

    <!-- 新建 / 编辑弹窗 -->
    <eb-dialog
      v-model="formVisible"
      :title="editing ? `编辑会员 · ${editing.name}` : '新建会员'"
      width="560px"
      :close-on-click-modal="false"
    >
      <eb-form ref="formRef" :model="form" :rules="rules" label-width="88px">
        <eb-form-item label="会员姓名" prop="name">
          <eb-input v-model="form.name" placeholder="请输入姓名" maxlength="20" show-word-limit />
        </eb-form-item>
        <eb-form-item label="手机号" prop="phone">
          <eb-input v-model="form.phone" placeholder="11 位手机号" />
        </eb-form-item>
        <eb-form-item label="邮箱" prop="email">
          <eb-input v-model="form.email" placeholder="选填" />
        </eb-form-item>
        <eb-form-item label="会员等级" prop="level">
          <eb-select v-model="form.level" style="width: 100%">
            <eb-option v-for="l in MEMBER_LEVEL" :key="l.value" :label="l.label" :value="l.value" />
          </eb-select>
        </eb-form-item>
        <eb-form-item label="所属部门" prop="dept">
          <eb-select v-model="form.dept" style="width: 100%">
            <eb-option v-for="d in DEPTS" :key="d" :label="d" :value="d" />
          </eb-select>
        </eb-form-item>
        <eb-form-item label="账户状态" prop="status">
          <eb-radio-group v-model="form.status">
            <eb-radio v-for="s in MEMBER_STATUS" :key="s.value" :label="s.value">{{ s.label }}</eb-radio>
          </eb-radio-group>
        </eb-form-item>
        <eb-form-item label="账户余额" prop="balance">
          <eb-input-number v-model="form.balance" :min="0" :step="100" style="width: 200px" />
        </eb-form-item>
      </eb-form>
      <template #footer>
        <eb-button @click="formVisible = false">取消</eb-button>
        <eb-button type="primary" :loading="saving" @click="save">保存</eb-button>
      </template>
    </eb-dialog>

    <!-- 导入 / 导出弹窗 -->
    <eb-dialog v-model="ioVisible" title="导入 / 导出会员" width="640px">
      <eb-import-export-panel
        ref="ioRef"
        template-name="会员导入模板.xlsx"
        import-tip="首列为会员姓名，手机号列必填；单次最多 2000 条。"
        @import-file="onImportFile"
        @export="onExport"
        @download-template="EbMessage.info('示例：下载「会员导入模板.xlsx』')"
      />
    </eb-dialog>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { EbMessage } from '@wil-works/evoke-business-ui'
import {
  MEMBER_STATUS,
  MEMBER_LEVEL,
  LEVEL_LABEL,
  DEPTS,
  fetchMembers,
  createMember,
  updateMember,
  removeMembers,
  importMembers,
} from './mock.js'

/* ---------------- 筛选 ---------------- */
// 用 ref 包对象：v-model 在查询时会整体替换值对象，reactive 常量承接不了这种赋值
const query = ref({ keyword: '', level: '', status: '' })
const filterFields = [
  { prop: 'keyword', label: '关键词', placeholder: '姓名 / 手机号 / 邮箱' },
  { prop: 'level', label: '会员等级', type: 'select', options: MEMBER_LEVEL },
  { prop: 'status', label: '账户状态', type: 'select', options: MEMBER_STATUS },
]

/* ---------------- 列配置与列设置 ---------------- */
const allColumns = [
  { prop: 'name', label: '会员姓名', width: 110 },
  { prop: 'phone', label: '手机号', width: 130 },
  { prop: 'level', label: '等级', slot: 'level', width: 92 },
  { prop: 'owner', label: '负责人', stack: (row) => row.dept, width: 110 },
  { prop: 'balance', label: '账户余额', slot: 'balance', align: 'right', width: 100 },
  { prop: 'createdAt', label: '注册时间', width: 165 },
  { prop: 'status', label: '状态', slot: 'status', width: 88 },
]
const settingColumns = allColumns.map(({ prop, label }) => ({ prop, label }))
const visibleProps = ref(settingColumns.map((c) => c.prop))
const visibleColumns = computed(() =>
  visibleProps.value.map((p) => allColumns.find((c) => c.prop === p)).filter(Boolean),
)

/* ---------------- 列表加载（模拟服务端分页） ---------------- */
const tableRef = ref(null)
const rows = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)
const loading = ref(false)
let lastQuery = { ...query.value }

async function load() {
  loading.value = true
  try {
    const res = await fetchMembers({ ...lastQuery, page: page.value, pageSize: pageSize.value })
    rows.value = res.list
    total.value = res.total
  } finally {
    loading.value = false
  }
}

function onSearch(values) {
  // 查询条件变化时回到第一页
  lastQuery = { ...values }
  page.value = 1
  load()
}

function handleRefresh() {
  load()
  EbMessage.success('列表已刷新')
}

/* ---------------- 行选择与删除 ---------------- */
const selection = ref([])

function onSelectionChange(rows) {
  selection.value = rows
}

async function removeOne(row) {
  removeMembers([row.id])
  EbMessage.success(`已删除会员「${row.name}」`)
  await load()
}

function batchRemove() {
  const ids = selection.value.map((r) => r.id)
  const count = removeMembers(ids)
  EbMessage.success(`已批量删除 ${count} 位会员`)
  tableRef.value?.clearSelection()
  load()
}

/* ---------------- 新建 / 编辑 ---------------- */
const formVisible = ref(false)
const saving = ref(false)
const editing = ref(null)
const formRef = ref(null)

const emptyForm = () => ({
  name: '',
  phone: '',
  email: '',
  level: 'basic',
  dept: DEPTS[0],
  status: 'active',
  balance: 0,
})
const form = reactive(emptyForm())

const rules = {
  name: [{ required: true, message: '请输入会员姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
  ],
  email: [{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }],
  level: [{ required: true, message: '请选择会员等级', trigger: 'change' }],
}

function openCreate() {
  editing.value = null
  Object.assign(form, emptyForm())
  formRef.value?.clearValidate()
  formVisible.value = true
}

function openEdit(row) {
  editing.value = row
  Object.assign(form, {
    name: row.name,
    phone: row.phone,
    email: row.email,
    level: row.level,
    dept: row.dept,
    status: row.status,
    balance: row.balance,
  })
  formRef.value?.clearValidate()
  formVisible.value = true
}

async function save() {
  let ok = true
  try {
    await formRef.value.validate()
  } catch {
    ok = false
  }
  if (!ok) {
    EbMessage.warning('请先完善表单必填项')
    return
  }
  saving.value = true
  setTimeout(() => {
    if (editing.value) {
      updateMember(editing.value.id, { ...form })
      EbMessage.success('会员信息已更新')
    } else {
      createMember({ ...form })
      EbMessage.success('新建会员成功')
    }
    saving.value = false
    formVisible.value = false
    load()
  }, 400)
}

/* ---------------- 导入 / 导出 ---------------- */
const ioVisible = ref(false)
const ioRef = ref(null)

function onImportFile(file) {
  if (!/\.(xlsx|xls|csv)$/i.test(file.name)) {
    EbMessage.error('仅支持 xlsx / xls / csv 文件')
    ioRef.value?.done('import')
    return
  }
  setTimeout(() => {
    const count = importMembers(3)
    EbMessage.success(`导入完成：新增 ${count} 位会员`)
    ioRef.value?.done('import')
    ioVisible.value = false
    load()
  }, 800)
}

function onExport(format) {
  setTimeout(() => {
    EbMessage.success(`已按 ${String(format).toUpperCase()} 格式导出 ${total.value} 条数据`)
    ioRef.value?.done('export')
  }, 800)
}

onMounted(load)
</script>

<style scoped>
.ml-page {
  padding: 16px;
}
.ml-card {
  margin-top: 12px;
}
/* SearchFilter 自带外框，与表格之间只留间距 */
.ml-card :deep(.eb-search-filter) {
  margin-bottom: 16px;
}
.ml-money {
  font-variant-numeric: tabular-nums;
}
</style>

组件构成

组件	在本场景中的角色
SearchFilter	配置式筛选表单（`fields` 数组声明关键词 / 等级 / 状态），`@search` 携带值快照
DataTable	多选、序号、双行单元格（列 `stack` 函数）、插槽列、受控分页、加载遮罩
ColumnSettings	工具栏列设置，`v-model` 为「按显示顺序的可见列 prop 数组」
ImportExportPanel	弹窗内的导入导出面板：选文件 → `import-file`，选格式 → `export`，完成后必须手动 `done()` 复位
Dialog + Form + FormItem	新建 / 编辑共用弹窗，`rules` 校验（手机号格式、必填）
Select + Option	下拉选择（注意：Select 没有 `options` prop，用 `eb-option` 子组件声明选项）
RadioGroup / InputNumber	账户状态单选、余额输入
StatusTag + Tag	状态列与等级标签（`statuses` 字典模块级复用）
Message / Popconfirm	操作反馈与删除二次确认

关键实现说明

筛选与分页的联动契约。@search 触发时把值快照存入 lastQuery 并强制回第一页；@page-change 触发时带着 lastQuery 重新请求 —— 这是服务端分页列表的标准范式：

function onSearch(values) {
  lastQuery = { ...values }
  page.value = 1
  load()
}

列设置的最小接入。全量列定义 allColumns，列设置只保存可见 prop 的有序数组，渲染时映射回完整列配置（slot / stack 函数不丢）：

const visibleColumns = computed(() =>
  visibleProps.value.map((p) => allColumns.find((c) => c.prop === p)).filter(Boolean),
)

导入导出的 loading 责任。ImportExportPanel 自身不做网络请求，也不自动复位 loading —— 校验失败或请求完成后调用 ioRef.done('import' | 'export')，否则按钮永远转圈。

新建与编辑共用一个弹窗。editing 行引用区分模式：编辑时 Object.assign(form, ...) 回填并 clearValidate()，避免上一次校验红字残留。

本地运行

bash

pnpm example:ebui-crud-list   # http://localhost:8622

text

examples/ebui-example-crud-list/
  src/
    App.vue
    pages/
      MemberListPage.vue      # 本页预览的源码
      mock.js                 # 内存单例库：fetch / create / update / remove / import

接入真实业务

把 mock.js 的 fetchMembers / createMember / ... 换成 HTTP 请求，签名不变，页面代码零改动；
删除后若当前页被删空，记得 page.value -= 1 再刷新（示例已处理）；
statuses 字典建议沉淀为业务常量模块，表格、详情、筛选下拉共用一份。

标准 CRUD 列表 ​

在线预览 ​

会员管理

组件构成 ​

关键实现说明 ​

本地运行 ​