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

vxe-table树表格实现产品列表与明细关联展示

时间：2026-06-15 06:59
通过配置vxe-table的treeConfig与treeNode属性，即可实现产品分类与子产品的树形关联。父级行展示类别，子级行显示SKU、价格等明细，支持多级嵌套，有效解决层级数据扁平化显示难题，提升表格可读性。

在日常的电商后台或者库存管理系统里，产品数据的呈现方式，往往绕不开一个经典难题：如何直观展示“分类 → 子产品”这种自上而下的层级关系。比如说，“手机”这个大类下面，挂着好几款具体型号的SKU；“笔记本电脑”底下又细分出不同配置的版本。传统的平铺表格，把所有数据一股脑儿塞进同一行，看起来扁平又杂乱，很难一眼就看清楚谁是谁的“爹”。

vxe-table 的树形表格（Tree Table）功能，就是专门解决这类问题的。它能把带有父子关系的数据，渲染成可以自由展开或收起的树状结构，完美解决层级数据的展示问题。这篇文章会带大家快速上手，用树形表格实现产品大类 + 明细产品的一体化展示，不需要太多弯弯绕绕。

实现效果

  • 父级行：展示产品类别名称、默认图片这一类概括信息。
  • 子级行：展示具体型号的 SKU、价格、库存、状态等所有明细数据。
  • 支持多级嵌套——本例演示的是两级，但实际操作中可以无限往下嵌套。

核心配置

开启树形模式 - treeConfig

要启用树形功能，需要先配置 treeConfig。这是一个比较灵活的设置项，核心是告诉组件：哪些字段用来标识父子关系。

复制代码treeConfig: {
  transform: true,        // 自动将扁平数据转换为树结构
  rowField: 'id',         // 行的唯一标识字段
  parentField: 'parentId' // 指向父级标识的字段
}
  • transform: true：这个开关非常实用。开启后，你不需要手动构建嵌套的对象数组，只要提供一维扁平数据，组件会根据 rowField 和 parentField 自动完成转换。
  • rowField：每一行数据的唯一 ID 字段名，通常是 id。
  • parentField：指向父行 ID 的字段名。根节点的 parentId 要设为 null 或 undefined，否则无法正确识别层级。

标识树节点列 - treeNode: true

光有父子关系还不够，还需要在界面上给用户一个可以点击的展开/收起按钮。这个按钮通常放在第一列，也就是产品名称列。只要在该列的配置里加上 treeNode: true 即可。

复制代码{
  field: 'productName',
  title: '产品信息',
  treeNode: true,        // 该列显示树形展开按钮
  slots: { default: 'product_default' }
}

这样，该列就会自动带上展开/收起的图标，点击即可操作。

代码

复制代码<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <template #product_default="{ row }">
        <div>{{ row.productName }}div>
        <div>编码：<vxe-text :content="row.productNO" click-to-copy>vxe-text>div>
        <div>品牌：{{ row.brand }}div>
      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 #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 #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 { reactive } from 'vue'
import XEUtils from 'xe-utils'const gridOptions = reactive({
  border: true,
  height: 800,
  cellConfig: {
    height: 100
  },
  rowConfig: {
    keyField: 'id',
    isHover: true,
    isCurrent: true
  },
  treeConfig: {
    transform: true,
    rowField: 'id',
    parentField: 'parentId'
  },
    columns: [
    { type: 'seq', width: 70 },
    {
      field: 'productImg',
      title: '图片',
      width: 100,
      cellRender: {
        name: 'VxeImage',
        props: {
          width: 80,
          height: 80
        }
      }
    },
    { field: 'productName', title: '产品信息', minWidth: 360, treeNode: true, slots: { 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: 'createDate', title: '负责人', width: 160, slots: { default: 'user_default' } }
  ],
  data: [
    { id: 10001, parentId: null, 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, parentId: null, productImg: 'https://vxeui.com/resource/productImg/product7.png', productName: '台式机', 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, parentId: null, 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, parentId: 10003, 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, parentId: 10001, 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, parentId: 10003, 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, parentId: 10002, 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, parentId: null, productImg: 'https://vxeui.com/resource/productImg/product7.png', productName: '显示器', 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, parentId: 10003, 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, parentId: 10001, 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, parentId: 10008, 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, parentId: 10002, 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, parentId: 10008, 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, parentId: 10001, 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 的树形表格功能，实现产品大类与明细的层级展示，概括起来就是三步走：
    • 配置 treeConfig，指定父子关系字段并开启自动转换。
    • 在需要显示树节点的列上设置 treeNode: true。
    • 准备好带有 parentId 的扁平数据（当然，如果你喜欢，也可以直接传嵌套的 children 结构）。

相较于传统的展开行或者分组等方式，树形表格更适合表达那种天然自带的层次关系——比如分类与子产品、组织架构与成员等等。交互上更直观，用户一看就明白数据之间的亲缘关系。上面给出的完整代码可以直接复制到你自己的项目里用，只要根据实际业务字段名调整一下列配置和数据源就行，非常方便。

来源：https://juejin.cn/post/7649415774249730057
其他
上一篇vxe-table产品按大类分组列表实现教程 下一篇Vue 3 PDF工具站生产环境8个踩坑经验
本站内容用于信息整理与展示，如有侵权或内容问题请及时联系处理。

相关推荐

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

同类最新

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

更多
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这