嘿，老铁，今天咱们聊聊 vxe-table 在 Vue 项目里怎么实现行展开查kan产品明细。

一般后台管理系统里产品列表一眼Nengkan到名字、SKU、库存之类的基本信息。

点一下那一行，就想把对应的订单明细、子产品、配件清单给弹出来。

这个需求kan起来hen鸡肋，但要是实现得好，用户体验立马提升一个档次。

说实话，用原生的

先在列配置里加个 { type: 'expand', width: 80, slots: { content: 'expand_content' } }。

然后写个 #expand_content 插槽，把子表格或者自定义的详情模板塞进去。

Zui关键的是别忘了给每一行设置唯一标识（row-id/keyField)，否则展开状态根本记不住。

#1 行展开后滚动卡顿？

默认模式是「固定」渲染，它支持虚拟滚动和列冻结。要是你用了「内嵌」模式，那性Neng会差一点儿。

#2 展开状态不保留？

在 expand-config 加上 { reserve:true }, 再配合 row-config.keyField, 就Neng在页面切换后保持展开状态。

#3 列宽自适应导致布局错位？

C端常用的是固定宽度，你Ke以手动算一下每列宽度或者直接写死，这样子表格弹出来时不会跳来跳去。

问：为什么百度不收录我的 vxe-table 示例页面？

A：其实大多数情况是因为页面渲染是纯前端 SPA，搜索引擎爬虫拿不到真实的 DOM 内容。解决办法Ke以加上服务端渲染或者使用 pre-render 工具把关键内容预生成 HTML。还有就是别忘了在 <a href="">`robots.txt` 和 `` 中放通。

下面这段代码正好对应你提到的需求：

   
     ... // 主表列省略
     &/* 展开按钮 */&
     <b-button @click="togShow">&larr;&rarr;&larr;&rarr;&larr;">
       {{ row.showContent ? '▲' : '▼' }}
     </b-button>
   </b-table>
   <b-table v-if="aData.showContent"<br/> 
   ... // 子表遍历展示
<b-table>
<b-row>
  <b-col span="k">
    // 用 vue 的过滤器把对象转成数组
  <%/b-col%>
<b-row%>
<b-table%>