<a-table
:columns="columnsTree"
:data-source="tableDataTree"
:pagination="false"
row-key="key"
:expanded-row-keys="expandedRowKeys"
:expandIcon ="expandIcon"
@expand="handleExpand"
:rowClassName="newRowStyle"
class="customer-table"
>
<!-- 合计行插槽 -->
<template #footer>
<table style="width:100%;">
<tr>
<td style="width: 50%;"><span style="color: #0353C7;font-weight: 500;">合计</span></td>
<td style="width: 50%;text-align: right;"><span style="color: #0353C7;font-weight: 500;">100</span></td>
</tr>
</table>
</template>
</a-table>
columnsTree: [
{
title: '号码',
dataIndex: 'number',
key: 'number',
width: 200,
},
{
title: '账单项',
dataIndex: 'billItem',
key: 'billItem',
},
{
title: '账目项',
dataIndex: 'accountItem',
key: 'accountItem',
},
{
title: '商品名称',
dataIndex: 'goodsName',
key: 'goodsName',
},
{
title: '费用(元)',
dataIndex: 'cost',
key: 'cost',
align: 'right',
customRender: (text, record) => {
if (record.isSummary) {
return <span style="color: #0353C7; font-weight: 500;">{text}</span>;
}
return text;
},
},
],
tableDataTree: [
{
key: '1',
number: '189****6782',
billItem: '月基本费',
accountItem: '小计',
goodsName: '',
cost: 60,
isSummary: true,
children: [
{
key: '1-1',
number: '',
billItem: '月基本费',
accountItem: 'C网套餐费',
goodsName: '5G畅享129元套餐',
cost: 129,
},
{
key: '1-2',
number: '',
billItem: '月基本费',
accountItem: 'C网套餐费',
goodsName: '全家享副卡优惠9元包',
cost: -9,
},
{
key: '1-3',
number: '',
billItem: '月基本费',
accountItem: 'C网套餐费',
goodsName: '69元优惠促销-24月',
cost: -60,
},
{
key: '1-4',
number: '',
billItem: '月基本费',
accountItem: '量子密话业务功能费',
goodsName: '量子密话业务功能包50元',
cost: 50,
},
{
key: '1-5',
number: '',
billItem: '月基本费',
accountItem: '量子密话业务功能费',
goodsName: '量子密话0元折扣包',
cost: -50,
},
],
},
{
key: '2',
number: '189****5886',
billItem: '月基本费',
accountItem: '小计',
goodsName: '',
cost: 20,
isSummary: true,
children: [
{
key: '1-1',
number: '',
billItem: '月基本费',
accountItem: 'C网套餐费',
goodsName: '5G畅享129元套餐',
cost: 129,
},
{
key: '1-2',
number: '',
billItem: '月基本费',
accountItem: 'C网套餐费',
goodsName: '全家享副卡优惠9元包',
cost: -9,
},
{
key: '1-3',
number: '',
billItem: '月基本费',
accountItem: 'C网套餐费',
goodsName: '69元优惠促销-24月',
cost: -60,
},
{
key: '1-4',
number: '',
billItem: '月基本费',
accountItem: '量子密话业务功能费',
goodsName: '量子密话业务功能包50元',
cost: 50,
},
{
key: '1-5',
number: '',
billItem: '月基本费',
accountItem: '量子密话业务功能费',
goodsName: '量子密话0元折扣包',
cost: -50,
},
],
},
{
key: '3',
number: '022****0481',
billItem: '月基本费',
accountItem: '小计',
goodsName: '',
cost: 20,
isSummary: true,
children: [
{
key: '1-1',
number: '',
billItem: '月基本费',
accountItem: 'C网套餐费',
goodsName: '5G畅享129元套餐',
cost: 129,
},
{
key: '1-2',
number: '',
billItem: '月基本费',
accountItem: 'C网套餐费',
goodsName: '全家享副卡优惠9元包',
cost: -9,
},
{
key: '1-3',
number: '',
billItem: '月基本费',
accountItem: 'C网套餐费',
goodsName: '69元优惠促销-24月',
cost: -60,
},
{
key: '1-4',
number: '',
billItem: '月基本费',
accountItem: '量子密话业务功能费',
goodsName: '量子密话业务功能包50元',
cost: 50,
},
{
key: '1-5',
number: '',
billItem: '月基本费',
accountItem: '量子密话业务功能费',
goodsName: '量子密话0元折扣包',
cost: -50,
},
],
},
],
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。