antdv Table组件展开行数据对齐表头(自定义表头)

1、需求如图:展开行里的数据要保持对齐表头,而且表头是可以自定义的(可自定义设置显示或者隐藏哪些字段),最好先看另一篇文章:antdv table组件封装成全局组件以及携带自定义表头展示

在这里插入图片描述

2、组件里使用公用表格组件,思路:表格嵌套表格,展开行里的表格展示的字段与外面表格保持一致,且不展示表头,其它不展示的内容赋值为空值,并且只显示一条数据即可!
// index.vue
<table-box
  v-if="isShow"
  :columns="state.columns"
  :dataSource="state.tableData"
  :pagination="pagination"
  :routerName="routerName"
  :rowSelection="rowSelection"
  @change="handleTableChange"
  @expand="handleExpanded"
  :expandedRowRender="expandedRowRender"
  @getTableColumns="getTableColumns"
>
  <template #showPostLabelList="{ record }">
    <span v-if="record.showPostLabelList && record.showPostLabelList.length > 0">
      <span>{
  { record.showPostLabelList[0].name }}</span>
    </span>
    <span v-else>--</span>
  </template>
  <template #showIssueItem="{ record }">
    <span v-if="record.showIssueItem && record.showIssueItem.length > 0">
      <span>{
  { record.showIssueItem[0].name }}</span>
    </span>
    <span v-else>--</span>
  </template>
  <template v-slot:expandedRowRender="{ record }">
    <div class="expand-box" v-if="record.tableShow">
      <a-table
        :showHeader="false"
        :columns="state.rowColumns"
        :data-source="record.innerData"
        :pagina
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值