卡片模式

卡片适合成员、资产、商品等以单条信息为中心的列表。字段、字典和插槽沿用 CRUD 配置，使用 grid: true 切换为卡片布局。

版本

卡片模式从 3.4.0 起支持；grid-status-change 从 3.4.7 起支持；下面的跨页保留选择示例请使用 3.9.5 及以上版本。

基本用法

效果预览可直接操作下方示例

grid 指定初始显示方式，gridBtn 控制卡片 / 表格切换按钮。点击右上方的切换按钮，下方状态会通过 grid-status-change 更新。

正在加载示例…

跨页保留选择

效果预览可直接操作下方示例

同时配置 selection: true、reserveSelection: true 和稳定的 rowKey。在第 1 页勾选一张卡片，切换到第 2 页再选择一张，然后回到第 1 页查看状态。「重新加载当前页」会创建新的行对象，但相同 ID 的选中状态仍保留。

正在加载示例…

<template>
  <div class="grid-selection-example">
    <div class="grid-selection-actions">
      <el-button @click="loadPage(page)">重新加载当前页</el-button>
      <el-button :disabled="!selected.length" @click="clearSelection">清空全部选择</el-button>
    </div>
    <avue-crud ref="crud"
               v-model:page="page"
               :option="option"
               :data="data"
               @on-load="loadPage"
               @selection-change="selectionChange" />
    <div class="grid-selection-result" aria-live="polite">
      <strong>已选择 {{ selected.length }} 条</strong>
      <p v-if="!selected.length">请勾选卡片，再翻页选择其他记录。</p>
      <div v-else class="grid-selection-tags">
        <el-tag v-for="row in selected" :key="row.id">#{{ row.id }} {{ row.name }}</el-tag>
      </div>
      <small>当前第 {{ page.currentPage }} 页 · 已加载 {{ loadCount }} 次</small>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const crud = ref(null);
const selected = ref([]);
const data = ref([]);
const loadCount = ref(0);
const rows = [
  { id: 101, name: '张三', department: '研发部' },
  { id: 102, name: '李四', department: '产品部' },
  { id: 103, name: '王五', department: '运营部' },
  { id: 104, name: '赵六', department: '测试部' },
  { id: 105, name: '周七', department: '设计部' },
  { id: 106, name: '吴八', department: '研发部' }
];
const page = ref({
  currentPage: 1,
  pageSize: 2,
  pageSizes: [2],
  total: rows.length,
  layout: 'total, prev, pager, next'
});
const option = ref({
  rowKey: 'id',
  grid: true,
  gridBtn: false,
  gridSpan: 12,
  gridXsSpan: 24,
  selection: true,
  reserveSelection: true,
  addBtn: false,
  menu: false,
  refreshBtn: false,
  columnBtn: false,
  column: [
    { label: '编号', prop: 'id', gridRow: true },
    { label: '姓名', prop: 'name', gridRow: true },
    { label: '部门', prop: 'department', gridRow: true }
  ]
});

function loadPage(currentPage) {
  const start = (currentPage.currentPage - 1) * currentPage.pageSize;
  // 模拟每次接口返回新对象；选中状态由稳定 id 保持。
  data.value = rows.slice(start, start + currentPage.pageSize).map(row => ({ ...row }));
  loadCount.value += 1;
}
function selectionChange(rows) {
  selected.value = rows;
}
function clearSelection() {
  crud.value.clearSelection();
}
</script>

<style scoped>
.grid-selection-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.grid-selection-actions .el-button { margin-left: 0; }
.grid-selection-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--el-fill-color-light);
  line-height: 1.7;
}
.grid-selection-result p { margin: 8px 0; }
.grid-selection-result small { display: block; margin-top: 10px; color: var(--el-text-color-secondary); }
.grid-selection-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
</style>