ant design pro 自定义展开图标

最新推荐文章于 2026-03-27 17:04:56 发布

原创最新推荐文章于 2026-03-27 17:04:56 发布 · 299 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#anti-design-vue #vue

<a-table
  ref="tables5"
  rowKey="key"
  :columns="transactionDetailColumns"
  :data-source="transactionDetailList"
  :pagination="transactionDetailPagination" :loading="confirmLoading" @change="handleTransactionDetailTableChange"
  :rowKey="data => data.id"
  @expand="getTransactionInnerData"
  showPagination="auto"
  :scroll="{ x: 'max-content' }"
>
  <a-table
    slot-scope="inner"
    :ref="'table-child-'+  inner.id "
    slot="expandedRowRender"
    :rowKey="data => data.id"
    :columns="orderDetailColumns"
    :data-source="inner.orderList"
    :pagination="false"
    :loading="confirmLoading"
  >
  </a-table>
  <span slot="expandIcon" slot-scope="props" class="table-operation item-group">
      // 自定义展开图标显示和不显示
   <template v-if="props.record.channelOrderNo=='11111'">
     <div @click="(e) => {props.onExpand(props.record, e);}" :class="props.expanded ? 'ant-table-row-expand-icon ant-table-row-expanded':'ant-table-row-expand-icon ant-table-row-collapsed'" role="button"></div>
   </template>
   <span v-else style="margin: 0 16px 0 0"></span>
  </span>
  <span slot="operation" slot-scope="text, record" class="table-operation item-group">
    <a slot="operation"  href="javascript:" v-if="record.isProcessed=='0' " v-action:transaction_hand_batch style="margin-left: 10px" @click="handleBatch(record)" >手动处理</a>
    <a slot="operation"  href="javascript:" v-if="record.isProcessed=='2'" v-action:transaction_cancel_batch style="margin-left: 10px" @click="cancelBatch(record)" >取消处理</a>
  </span>
</a-table>

getTransactionInnerData(expanded, record){
  let that = this;
  console.log('交易详情展开')
},