游乐游手机版
首页/前端开发/文章详情

vxe-table产品按大类分组列表实现教程

时间：2026-06-15 06:58
vxe-table通过配置aggregateConfig实现按产品大类分组，聚合行可展开 收起，利用spanMethod合并单元格，使分组行显示自定义内容（如分组名、首产品编号及提交时间），普通行保持完整列信息。

后台管理系统里，经常要按产品类别、部门、状态这些字段把数据分组展示，这样用户一眼就能看到汇总信息。vxe-table 的数据分组能力相当成熟，一条简单的配置就能搞定，还能自定义分组行里显示什么内容。

  • 下面演示基于 vxe-table 如何按产品大类（category）分组，效果是这样的：
    • 同一类别的产品被收纳到一个分组中，分组行可展开/收起。
    • 分组行可以显示自定义内容（比如分组名称、该组首个产品的编号和提交时间）。
    • 分组内的产品行保持完整的列信息（图片、SKU、数量、状态等）。

配置说明

2.1 开启分组 - aggregateConfig

groupFields：指定按哪些字段进行分组，支持多级分组（如 ['category', 'brand']）。本例只按 category 分组。

2.2 分组行合并 - spanMethod

分组后，表格默认会在每组上方插入一条聚合行（Aggregate Row）。为了让聚合行看起来像一个独立的分组标题（而非普通数据行），我们需要利用 spanMethod 对聚合行进行单元格合并，将除复选框列之外的所有列合并成一整列，以便在其中显示自定义分组内容。

spanMethod({ row, column }) {
  const $grid = gridRef.value
  if ($grid && $grid.isAggregateRecord(row)) {
    const { tableColumn } = $grid.getTableColumn()
    // 复选框列保持独立
    if (column.type === 'checkbox') {
      return { rowspan: 1, colspan: 1 }
    }
    // 对于聚合行，让“产品编号”这一列占据后面所有列的宽度
    if (column.field === 'productNO') {
      return { rowspan: 1, colspan: tableColumn.length - 1 }
    }
    // 其余列隐藏（行列数为0）
    return { rowspan: 0, colspan: 0 }
  }
  return { rowspan: 1, colspan: 1 }
}
  • 说明：
    • $grid.isAggregateRecord(row) 用于判断当前行是否为分组聚合行。
    • 我们将聚合行的所有内容合并到 productNO 这一列中，因此需要为其他列返回 { rowspan: 0, colspan: 0 }。
    • 复选框列不需要合并，保持原样（方便全选分组）。

2.3 分组行自定义内容 - 插槽 groupContent

在列定义中，为参与合并的列（此处为 productNO 列）添加 slots.groupContent：

{
  field: 'productNO',
  title: '产品编号',
  rowGroupNode: true,  // 标识该列是分组依据列
  minWidth: 320,
  slots: {
    groupContent: 'product_group_content',  // 分组行自定义内容
    default: 'product_default'              // 普通行自定义内容
  }
}

2.4 普通行自定义内容 - 其他插槽

其余列（SKU、数量、状态、负责人等）也通过插槽进行个性化渲染，例如

<template #sku_default="{ row }">
  <div>SKU：<vxe-text :content="row.sku" click-to-copy>vxe-text>div>
  <div>颜色：{{ row.color }}div>
template>

代码

<template>
  <div>
    <vxe-grid ref="gridRef" v-bind="gridOptions">
      <template #product_group_content="{ groupContent, childList }">
        <span style="margin-right: 32px">{{ groupContent }}span>
        <span style="margin-right: 32px">订单编号：<vxe-text :content="childList[0] ? childList[0].productNO : '-'" click-to-copy>vxe-text>span>
        <span style="margin-right: 32px">提交时间：{{ childList[0] ? childList[0].createDate : '-' }}span>
      template>      <template #product_default="{ row }">
        <vxe-text status="primary">{{ row.productName }}vxe-text>
        <div>编码：<vxe-text :content="row.productNO" click-to-copy>vxe-text>div>
        <div>品牌：{{ row.brand }}div>
      template>      <template #status_default="{ row }">
        <vxe-tag v-if="row.status === 'complete'" status="success" content="已完成">vxe-tag>
        <vxe-tag v-else-if="row.status === 'cancel'" status="warning" content="已取消">vxe-tag>
        <vxe-tag v-else-if="row.status === 'pending'" status="error" content="待付款">vxe-tag>
        <vxe-tag v-else status="info" content="未提交">vxe-tag>
      template>      <template #sku_default="{ row }">
        <div>SKU：<vxe-text :content="row.sku" click-to-copy>vxe-text>div>
        <div>颜色：{{ row.color }}div>
      template>      <template #quantity_default="{ row }">
        <div>价格：￥{{ formatAmount(row.amount) }}div>
        <div>库存：{{ row.inventory }}div>
        <div>数量：{{ row.quantity }}div>
      template>      <template #user_default="{ row }">
        <div>负责人：{{ row.createBy }}div>
        <div>提交时间：{{ row.createDate }}div>
        <div>审批人：{{ row.createBy }}div>
        <div>审批时间：{{ row.createDate }}div>
      template>
    vxe-grid>
  div>
template><script setup>
import { ref, reactive } from 'vue'
import XEUtils from 'xe-utils'
const gridRef = ref()
const gridOptions = reactive({
  border: true,
  height: 800,
  rowConfig: {
    keyField: 'id',
    isHover: true,
    isCurrent: true
  },
  aggregateConfig: {
    groupFields: ['category']
  },
  spanMethod({ row, column }) {
    const $grid = gridRef.value
    if ($grid && $grid.isAggregateRecord(row)) {
      const { tableColumn } = $grid.getTableColumn()
      if (column.type === 'checkbox') {
        return { rowspan: 1, colspan: 1 }
      }
      if (column.field === 'productNO') {
        return { rowspan: 1, colspan: tableColumn.length - 1 }
      }
      return { rowspan: 0, colspan: 0 }
    }
    return { rowspan: 1, colspan: 1 }
  },
  columns: [
    { type: 'checkbox', width: 70 },
    {
      field: 'productImg',
      title: '图片',
      width: 100,
      cellRender: {
        name: 'VxeImage',
        props: {
          width: 80,
          height: 80
        }
      }
    },
    { field: 'productNO', title: '产品编号', rowGroupNode: true, minWidth: 320, slots: { groupContent: 'product_group_content', default: 'product_default' } },
    { field: 'sku', title: 'SKU', minWidth: 180, slots: { default: 'sku_default' } },
    { field: 'quantity', title: '数量', width: 120, slots: { default: 'quantity_default' } },
    { field: 'status', title: '状态', width: 100, slots: { default: 'status_default' } },
    { field: 'createBy', title: '负责人', width: 220, slots: { default: 'user_default' } }
  ],
  data: [
    { id: 10001, productImg: 'https://vxeui.com/resource/productImg/product8.png', productName: '折叠笔记本', productNO: 'X2023653453464565435854', producType: '', brand: '地球第三品牌', category: '笔记本电脑', status: 'failure', sku: '34534456', color: '蓝色', amount: 5600, quantity: 475, inventory: 745, updateBy: '小明', updateDate: '2026-01-02', createBy: '小明', createDate: '2026-01-02' },
    { id: 10002, productImg: 'https://vxeui.com/resource/productImg/product7.png', productName: '16核主机', productNO: 'X20236585965676576867876', producType: '', brand: '地球第三品牌', category: '台式机', status: 'pending', sku: '567575675', color: '黑色', amount: 8933, quantity: 210, inventory: 396, updateBy: '老徐', updateDate: '2026-01-01', createBy: '老徐', createDate: '2026-01-01' },
    { id: 10003, productImg: 'https://vxeui.com/resource/productImg/product3.png', productName: '无边框手机', productNO: 'X202365859650245345435', producType: '', brand: '地球第三品牌', category: '手机', status: 'complete', sku: '123424', color: '粉色', amount: 4200, quantity: 666, inventory: 758, updateBy: '张三', updateDate: '2026-01-03', createBy: '张三', createDate: '2026-01-03' },
    { id: 10004, productImg: 'https://vxeui.com/resource/productImg/product2.png', productName: '卫星手机', productNO: 'X2023658597578657432543', producType: '', brand: '地球第三品牌', category: '手机', status: 'cancel', sku: '4564564456', color: '灰色', amount: 3500, quantity: 380, inventory: 482, updateBy: '老王', updateDate: '2026-01-01', createBy: '老王', createDate: '2026-01-01' },
    { id: 10005, productImg: 'https://vxeui.com/resource/productImg/product7.png', productName: '触摸屏笔记本', productNO: 'X202365823410205224', producType: '', brand: '地球第三品牌', category: '笔记本电脑', status: 'cancel', sku: '67876876', color: '白色', amount: 5760, quantity: 562, inventory: 1052, updateBy: '老六', updateDate: '2026-01-04', createBy: '老六', createDate: '2026-01-04' },
    { id: 10006, productImg: 'https://vxeui.com/resource/productImg/product6.png', productName: '四折叠手机', productNO: 'X202365859657896895354', producType: '', brand: '地球第三品牌', category: '手机', status: 'pending', sku: '234234234', color: '灰色', amount: 6800, quantity: 110, inventory: 140, updateBy: '老徐', updateDate: '2026-01-08', createBy: '老徐', createDate: '2026-01-08' },
    { id: 10007, productImg: 'https://vxeui.com/resource/productImg/product11.png', productName: '无显卡主机', productNO: 'X20236585965824535443543', producType: '', brand: '地球第三品牌', category: '台式机', status: 'complete', sku: '45645654646', color: '黑色', amount: 9990, quantity: 200, inventory: 500, updateBy: '老王', updateDate: '2026-01-11', createBy: '老王', createDate: '2026-01-11' },
    { id: 10008, productImg: 'https://vxeui.com/resource/productImg/product7.png', productName: '27寸显示器', productNO: 'X20236554738756876753453', producType: '', brand: '地球第三品牌', category: '显示器', status: 'complete', sku: '678768678678', color: '银色', amount: 1200, quantity: 98, inventory: 132, updateBy: '小红', updateDate: '2026-01-08', createBy: '小红', createDate: '2026-01-08' },
    { id: 10009, productImg: 'https://vxeui.com/resource/productImg/product4.png', productName: '折叠手机', productNO: 'X2023652344756876578789', producType: '', brand: '地球第三品牌', category: '手机', status: 'cancel', sku: '32543543', color: '绿色', amount: 2400, quantity: 758, inventory: 820, updateBy: '老徐', updateDate: '2026-01-23', createBy: '老徐', createDate: '2026-01-23' },
    { id: 10010, productImg: 'https://vxeui.com/resource/productImg/product5.png', productName: '双折叠笔记本', productNO: 'X20236586789088096547', producType: '', brand: '地球第三品牌', category: '笔记本电脑', status: 'failure', sku: '6575676575', color: '银色', amount: 7200, quantity: 69, inventory: 204, updateBy: '老六', updateDate: '2026-01-10', createBy: '老六', createDate: '2026-01-10' },
    { id: 10011, productImg: 'https://vxeui.com/resource/productImg/product1.png', productName: '32寸显示器', productNO: 'X20236585932540987768', producType: '', brand: '地球第三品牌', category: '显示器', status: 'complete', sku: '8768768768', color: '黑色', amount: 860, quantity: 165, inventory: 425, updateBy: '李四', updateDate: '2026-01-22', createBy: '李四', createDate: '2026-01-22' },
    { id: 10012, productImg: 'https://vxeui.com/resource/productImg/product11.png', productName: '64G独显主机', productNO: 'X20236585963453654567678', producType: '', brand: '地球第三品牌', category: '台式机', status: 'cancel', sku: '567567756', color: '白色', amount: 13400, quantity: 100, inventory: 436, updateBy: '张三', updateDate: '2026-01-18', createBy: '张三', createDate: '2026-01-18' },
    { id: 10013, productImg: 'https://vxeui.com/resource/productImg/product4.png', productName: '24寸显示器', productNO: 'X202365853455677887698790', producType: '', brand: '地球第三品牌', category: '显示器', status: 'pending', sku: '1233123', color: '黑色', amount: 1022, quantity: 39, inventory: 1000, updateBy: '老徐', updateDate: '2026-01-17', createBy: '老徐', createDate: '2026-01-17' },
    { id: 10014, productImg: 'https://vxeui.com/resource/productImg/product6.png', productName: '虚拟键盘笔记本', productNO: 'X202365807645670879', producType: '', brand: '地球第三品牌', category: '笔记本电脑', status: 'complete', sku: '4568787', color: '银色', amount: 11000, quantity: 369, inventory: 2000, updateBy: '李四', updateDate: '2026-01-15', createBy: '李四', createDate: '2026-01-15' }
  ]
})const formatAmount = (num) => {
  return XEUtils.commafy(num)
}
script>
  • 这套方案利用 vxe-table 的 aggregateConfig、spanMethod 和插槽系统，把数据分组展示玩得很灵活。不仅做到了按产品大类分组，还能在分组行里显示该组第一条记录的编号和时间，普通行也保留完整的自定义渲染。订单按状态分组、员工按部门分组，都可以套用这个模式。
来源：https://juejin.cn/post/7649415774249680905
其他
上一篇Vue表格中vxe-table展开行实现产品列表与明细列表 下一篇vxe-table树表格实现产品列表与明细关联展示
本站内容用于信息整理与展示，如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容，方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
checked表单属性与CSS变量实现换肤原理
前端开发 · 2026-07-02

checked表单属性与CSS变量实现换肤原理

先聊一个有意思的现象：不需要编写任何 JavaScript，仅靠一个 :checked 伪类，就能驱动整个主题切换系统。听起来很神奇，但原理其实并不复杂——核心在于，:checked 是浏览器原生状态的实时镜像，而不是 JS 模拟出来的开关。 用户点击 ，或者用键盘空格键选中它，状态更新的那一刻，C

 HTML meta标签页面定时跳转实现
前端开发 · 2026-07-02

HTML meta标签页面定时跳转实现

说到前端开发中最简洁的页面跳转方式，meta http-equiv= "refresh " 绝对算得上一个经典方案。不过别看它结构简单，格式上稍有疏忽，页面就可能原地卡死，或者直接跳到一个错误地址。下面把几个最容易踩坑的细节彻底讲清楚，帮你避开这些常见陷阱。 使用 http-equiv= "refresh

 Cypress跨测试用例状态传递的不推荐但可选方案
前端开发 · 2026-07-02

Cypress跨测试用例状态传递的不推荐但可选方案

Cypress 默认的设计哲学很干脆：每个测试用例都必须是独立小王国，谁也不靠谁。这意味着 it() 执行前，浏览器上下文会被“一键还原”——页面状态、LocalStorage、Cookies 统统清空，强制维护测试隔离。这一规则让很多新手头疼：明明前一个测试已经创建了员工，后一个测试怎么就没法直接

 全面深度解析HTML主体main标签唯一性原则与使用规范
前端开发 · 2026-07-02

全面深度解析HTML主体main标签唯一性原则与使用规范

在进行前端无障碍审计时，不少开发者会遇到一个奇怪的场景：浏览器不报错，但Lighthouse却直接标红“duplicate-main”。这其实是语义层与渲染层之间的根本差异。 为什么浏览器不报错但 Lighthouse 直接标红 duplicate-main 关键原因就在于：`main` 是语义锚点

 HTML main标签在文档结构中的唯一性详解
前端开发 · 2026-07-02

HTML main标签在文档结构中的唯一性详解

先做一个快速检测：打开你最近开发的一个页面，按下 Ctrl+F 搜索 。如果搜索结果里出现2个以上，那这篇文章建议你认真读完。 本期要聊的主题，是HTML标签中一个看似简单、实际极易踩坑的核心知识点：main标签的唯一性。很多开发者知道这个标签的存在，但真正写到项目里，尤其是用了React、Vue这