Vue表格中vxe-table展开行实现产品列表与明细列表

在实际业务中，主从表（Master-Detail）展示确实是个高频场景——产品列表下挂着订单明细、项目下面拆成子任务，这类需求几乎天天遇到。vxe-table 的展开行（Expand Row）功能正好能优雅地解决这个问题：用户点一下展开按钮，主行下方就能嵌入子表格或其他自定义内容，主从数据的关联展示瞬间变得很直观。

这篇文章会拆解两个典型场景：一个是产品列表搭配订单明细，主表展示产品基本信息，子表展示对应的订单记录；另一个是产品明细列表（SKU 级别）加上订单明细，主表细化到 SKU、图片、库存等维度，子表同样展示订单明细。通过这两个案例，你会掌握 vxe-grid 展开行的核心用法——无非就是配置 expandConfig、定义 type: 'expand' 列、再通过 slots 自定义展开内容这几个步骤。

场景一：实现产品列表带明细

先看第一种情况：用展开行的方式，让产品列表下面直接带出子产品明细表，子表展示完整的订单信息。

关键配置

代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <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 #expand_content="{ row }">
        <vxe-grid v-bind="subGridOptions" :data="row.detailedList">
          <template #order_name_default="{ row: subRow }">
            <div>{{ subRow.orderName }}div>
            <div>编码：<vxe-text :content="subRow.orderNO" click-to-copy>vxe-text>div>
            <div>型号：<vxe-text :content="subRow.orderCode" click-to-copy>vxe-text>div>
            <div>品牌：{{ subRow.orderType }}div>
          template>          <template #amount_default="{ row: subRow }">
            <div>价格：￥{{ formatAmount(subRow.amount) }}div>
            <div>数量：{{ subRow.quantity }}div>
          template>          <template #user_default="{ row: subRow }">
            <div>提交人：{{ subRow.createBy }}div>
            <div>提时间：{{ subRow.createDate }}div>
            <div>修改人：{{ subRow.createBy }}div>
            <div>修改时间：{{ subRow.createDate }}div>
          template>
        vxe-grid>
      template>
    vxe-grid>
  div>
template>

（注：上述代码中 script 部分及子表格配置的数据、模拟数据等因篇幅限制未完全展开，完整实现请参考后文注释和实际运行效果。）

场景二：产品明细列表（SKU级）+ 订单明细

再看第二种情况：通过展开行实现产品明细列表，主表和子表都有详细的信息展示。这里有一个值得注意的细节——一个 type: 'expand' 的列可以同时定义 slots.default（折叠时显示的内容）和 slots.content（展开时显示的额外内容），而且 default 插槽并不会覆盖原有的展开按钮，按钮依然会独立显示。主表其他列也使用了自定义插槽，比如 sku_default 展示 SKU 和颜色，quantity_default 展示库存和数量，user_default 展示负责人和时间等。

代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <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 #expand_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>库存：{{ 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>      <template #expand_content="{ row }">
        <vxe-grid v-bind="subGridOptions" :data="row.detailedList">
          <template #order_name_default="{ row: subRow }">
            <div>{{ subRow.orderName }}div>
            <div>编码：<vxe-text :content="subRow.orderNO" click-to-copy>vxe-text>div>
            <div>型号：<vxe-text :content="subRow.orderCode" click-to-copy>vxe-text>div>
            <div>品牌：{{ subRow.orderType }}div>
          template>          <template #amount_default="{ row: subRow }">
            <div>价格：￥{{ formatAmount(subRow.amount) }}div>
            <div>数量：{{ subRow.quantity }}div>
          template>          <template #user_default="{ row: subRow }">
            <div>提交人：{{ subRow.createBy }}div>
            <div>提交时间：{{ subRow.createDate }}div>
            <div>修改人：{{ subRow.createBy }}div>
            <div>修改时间：{{ subRow.createDate }}div>
          template>
        vxe-grid>
      template>
    vxe-grid>
  div>
template>

（注：script 配置部分与场景一类似，主要差异在于主表 columns 的 expand 列同时使用了 slots.default 和 slots.content。）

效果对比

场景一的主表展开列只显示了产品编号（没有使用 default 插槽）；场景二则通过 default 插槽，在折叠状态下就展示了产品名称、编码和品牌，信息更丰富。两种方式都能满足主从表的需求，具体选哪种，取决于 UI 设计是否希望在展开列中预先展示额外信息。

总的来说，利用 vxe-table 的展开行机制，主从表的关联展示变得相当优雅。几步简单的配置——设置 expandConfig、在列中定义 type: 'expand' 并关联插槽、在插槽中嵌入子表格——就能快速搞定。而且子表格可以独立配置列、样式和交互，数据展示的灵活性和用户体验都提升了不少。上面两个案例完整覆盖了从产品级到 SKU 级的明细关联场景，如果实际业务中有类似需求，可以直接拿来用或者稍作改造。

更多展开行的高级用法，可以翻翻 vxe-table 官方文档。

vxetable.cn