ant-design-vue表格嵌套子表格，实现子表格有数据才显示左侧加号图标

通过使用插槽的方式，以下为全部项目的代码，关键的代码就两块，看注释

<template>
    <a-card>
      <a-form class="kit_form" ref="formRef" name="custom-validation" :model="searchParams">
      <a-row>
        <!-- <a-col :md="8" :lg="6">
          <a-form-item label="规则名称" name="ruleName" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input v-model:value="searchParams.ruleName" placeholder="请输入规则名称" allowClear />
          </a-form-item>
        </a-col> -->
        <a-col :md="8" :lg="6">
          <a-form-item label="下单时间" name="dataArr" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-range-picker v-model:value="searchParams.dataArr" @change="fn.changeDate" allowClear format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
        <a-col :md="8" :lg="6">
          <a-button type="primary" @click="fn.search" style="margin: 0 10px">
            <search-outlined />
            查询
          </a-button>
          <a-button @click="fn.reset">
            <reload-outlined />
            重置
          </a-button>
        
        </a-col>
      </a-row>
      <a-button type="primary" preIcon="ant-design:export-outlined" @click="handleExportXls('财务对账单', exportXls, searchParams)"> 导出</a-button>
    </a-form>


    <a-table :columns="ob.columns" :loading="loading" :data-source="ob.list" class="components-table-demo-nested"  
    :pagination="ob.pagination" :expandedRowKeys="expandedRowKeys"  
     @change="fn.paginationChange">
   
    <!-- 方法1插槽-加号控制 -->
    <template #expandIcon="{ record }">
        <template v-if="record.lisOrderDetailList && record.lisOrderDetailList.length > 0">
            <button  :class="[
              'ant-table-row-expand-icon',
              !isExpand[record.key]
                ? 'ant-table-row-expand-icon-collapsed'
                : 'ant-table-row-expand-icon-expanded'
            ]"
            @click="fn.expandRow(record,record.key)"></button>
        </template>
        <template v-else>
            <span></span>
        </template>
    </template>


      <template #operation>
        <a>Publish</a>
      </template>

      <template #expandedRowRender>
        <a-table :columns="ob.innerColumns" :data-source="ob.innerlist" :pagination="false">
          <template #status>
            <span>
              <a-badge status="success" />
              Finished
            </span>
          </template>
          <template #operation>
            <span class="table-operation">
              <a>Pause</a>
              <a>Stop</a>
              <a-dropdown>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>Action 1</a-menu-item>
                    <a-menu-item>Action 2</a-menu-item>
                  </a-menu>
                </template>
                <a>More</a>
              </a-dropdown>
            </span>
          </template>
        </a-table>
      </template>

    </a-table>
</a-card>
  </template>
  <script lang="ts" setup>
  import { defineComponent,ref, unref, reactive, toRaw, watch, computed,onMounted} from 'vue';
  import { distributionOrdersList,exportXls,queryLisOrder } from './financialStatement.api';//引入列表接口
  import { filterObj } from '/@/utils/common/compUtils';
  import { useMethods } from '/@/hooks/system/useMethods';
  import { formatDate } from '/@/utils_k/date';
  const { handleExportXls, handleImportXls } = useMethods();
  let expandedRowKeys = ref([])
  let isExpand = reactive({})
  let loading = ref(false)
  let formRef = ref();
  let searchParams: any = reactive({
        dataArr: null,
        beginDate: '',
        endDate: '',
        });
  let ob = reactive({
    pagination: {
      pageSize: 10,
      current: 1,
      total: 0,
      pageSizeOptions: ['10', '20', '50'],
      showSizeChanger: true,
      showTotal: () => {
        return `共${ob.pagination.total}条`
      },
    },
    list: [],
    innerlist: [],
    columns: [//主表头
    { title: '小程序订单号', dataIndex: 'orderId', key: 'orderId' },

    { title: '订单支付金额', dataIndex: 'price', key: 'price' },
    { title: '商品名称', dataIndex: 'productName', key: 'productName' },
    { title: '订单状态', dataIndex: 'orderStatus', key: 'orderStatus',
    // customRender:({text})=>{
    //     if(text == '1'){
    //       return '已采样'
    //     }else if(text == '0'){
    //       return '待采样'
    //     }else if(text == '2'){
    //       return '已完成'
    //     }else if(text == '3'){
    //       return '已取消'
    //     }else if(text == '4'){
    //       return '待付款'
    //     }else{
    //       return '支付失败'
    //     }
    //   }
    },
    { title: '下单时间', dataIndex: 'orderTime', key: 'orderTime' },
    { title: '微信支付单号', dataIndex: 'payOrderId', key: 'payOrderId' },
    { title: '支付时间', dataIndex: 'payTime', key: 'payTime' },
    { title: '电子发票单号', dataIndex: 'electronicInvoiceOrderNumber', key: 'electronicInvoiceOrderNumber' },
    { title: '开票时间', dataIndex: 'invoicingTime', key: 'invoicingTime' },
    { title: '微信退款单号', dataIndex: 'returnOrderId', key: 'returnOrderId' },
    // { title: 'Action', key: 'operation', slots: { customRender: 'operation' } },
  ],
  innerColumns:[//副表头
      { title: '关联LIS订单号', dataIndex: 'orderNo', key: 'orderNo' },
    { title: '受托机构', dataIndex: 'orgName', key: 'orgName' },
    { title: '条码号', dataIndex: 'barCode', key: 'barCode' },
    { title: '姓名', dataIndex: 'patientName', key: 'patientName' }, 
    { title: '性别', dataIndex: 'genderName', key: 'genderName' }, 
    { title: '申请项目', dataIndex: 'inspectGroupName', key: 'inspectGroupName' }, 
    { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime' }, 
    { title: '专业组', dataIndex: 'disciplineName', key: 'disciplineName' }, 
    { title: '报告状态', dataIndex: 'reportStatusName', key: 'reportStatusName' }, 
    { title: '报告时间', dataIndex: 'reportTime', key: 'reportTime' }, 
    { title: '业务类型', dataIndex: 'applicationTypeName', key: 'applicationTypeName' }, 
  
    // { title: 'Status', key: 'state', slots: { customRender: 'status' } },
    // {
    //   title: 'Action',
    //   dataIndex: 'operation',
    //   key: 'operation',
    //   slots: { customRender: 'operation' },
    // },
  ]
  });

  
  let fn = {
    getList() {
        loading.value = true
        expandedRowKeys.value = []//复位
        Object.keys(isExpand).forEach((k) => { //复位
        isExpand[k] = false;  
      });  
        delete searchParams.dataArr;
        let params = {
            ...searchParams,
            pageNo: ob.pagination.current,
            pageSize: ob.pagination.pageSize,
        };
      distributionOrdersList(params).then((res) => {
        console.log('res', res);
        loading.value = false
        ob.list = res.records;
        ob.pagination.total = res.total;
      });
    },
    paginationChange(e) {
      console.log('1', e);
      ob.pagination.current = e.current;
      ob.pagination.pageSize = e.pageSize;
      fn.getList()
    },
  
    handleResizeColumn(w,col){
      col.width = w;
    },

    //原生监听收展
    // getInnerData(expanded, record:any) {
    //     expandedRowKeys.value = []
    //   if (expanded) { 
    //     console.log(record,8888)

    //     expandedRowKeys.value.push(Number(record.key))
    //     console.log(expandedRowKeys.value,66666)

    //     ob.innerlist = []
    //     ob.innerlist = record.lisOrderDetailList
    //   }
    // },


    // 方法1插槽-加号控制
    expandRow(record:any,key:any){
       // 将所有isExpand的值设为false  
      Object.keys(isExpand).forEach((k) => {  
        isExpand[k] = false;  
      });  
  
      console.log(key,111)
      console.log(isExpand,222)
  
      if (!expandedRowKeys.value.includes(key)) {
          expandedRowKeys.value = []
          expandedRowKeys.value.push(Number(key))
          ob.innerlist = record.lisOrderDetailList
          console.log('展开')
          isExpand[key] = true
      } else {
          const closedIndex = expandedRowKeys.value.indexOf(key);
          expandedRowKeys.value.splice(closedIndex, 1);//清除当前的，也就是清空了
          console.log('收起')
          isExpand[key] = false
      }

    },

search() {
    ob.pagination.current = 1;
    fn.getList();
  },
  reset() {
    formRef.value.resetFields();
    searchParams.dataArr = null;
    searchParams.beginDate ='';
        searchParams.endDate = '';
    fn.search();
  },

  changeDate(e) {
    if (e) {
        searchParams.beginDate = formatDate(e[0], 'Y-M-D') + ' 00:00:00';
        searchParams.endDate = formatDate(e[1], 'Y-M-D') + ' 23:59:59';
    }
    console.log('e', e);
  },

  };
  
  onMounted(() => {
    fn.getList()
  })
  
  
  </script>