建设一个企业网站需要多少钱,我要下载百度,免费游戏网页入口,力网站票网站开发ant-design-vue表格嵌套子表格#xff0c;实现子表格有数据才显示左侧加号图标 通过使用插槽的方式#xff0c;以下为全部项目的代码#xff0c;关键的代码就两块#xff0c;看注释
templatea-carda-form classkit_form refformRef…ant-design-vue表格嵌套子表格实现子表格有数据才显示左侧加号图标 通过使用插槽的方式以下为全部项目的代码关键的代码就两块看注释
templatea-carda-form classkit_form refformRef namecustom-validation :modelsearchParamsa-row!-- a-col :md8 :lg6a-form-item label规则名称 nameruleName :label-col{ span: 6 } :wrapper-col{ span: 18 }a-input v-model:valuesearchParams.ruleName placeholder请输入规则名称 allowClear //a-form-item/a-col --a-col :md8 :lg6a-form-item label下单时间 namedataArr :label-col{ span: 6 } :wrapper-col{ span: 18 }a-range-picker v-model:valuesearchParams.dataArr changefn.changeDate allowClear formatYYYY-MM-DD valueFormatYYYY-MM-DD//a-form-item/a-cola-col :md8 :lg6a-button typeprimary clickfn.search stylemargin: 0 10pxsearch-outlined /查询/a-buttona-button clickfn.resetreload-outlined /重置/a-button/a-col/a-rowa-button typeprimary preIconant-design:export-outlined clickhandleExportXls(财务对账单, exportXls, searchParams) 导出/a-button/a-forma-table :columnsob.columns :loadingloading :data-sourceob.list classcomponents-table-demo-nested :paginationob.pagination :expandedRowKeysexpandedRowKeys changefn.paginationChange!-- 方法1插槽-加号控制 --template #expandIcon{ record }template v-ifrecord.lisOrderDetailList record.lisOrderDetailList.length 0button :class[ant-table-row-expand-icon,!isExpand[record.key]? ant-table-row-expand-icon-collapsed: ant-table-row-expand-icon-expanded]clickfn.expandRow(record,record.key)/button/templatetemplate v-elsespan/span/template/templatetemplate #operationaPublish/a/templatetemplate #expandedRowRendera-table :columnsob.innerColumns :data-sourceob.innerlist :paginationfalsetemplate #statusspana-badge statussuccess /Finished/span/templatetemplate #operationspan classtable-operationaPause/aaStop/aa-dropdowntemplate #overlaya-menua-menu-itemAction 1/a-menu-itema-menu-itemAction 2/a-menu-item/a-menu/templateaMore/a/a-dropdown/span/template/a-table/template/a-table
/a-card/templatescript langts setupimport { 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
