网站优化建设广州互动营销公司

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 = trueexpandedRowKeys.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 = falseob.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.lisOrderDetailListconsole.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>