惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
H
Hacker News: Front Page
P
Palo Alto Networks Blog
T
ThreatConnect
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
T
True Tiger Recordings
P
Privacy & Cybersecurity Law Blog
B
Blog
IT之家
IT之家
Last Week in AI
Last Week in AI
F
Full Disclosure
Hacker News: Ask HN
Hacker News: Ask HN
C
Comments on: Blog
Microsoft Azure Blog
Microsoft Azure Blog
C
Cybersecurity and Infrastructure Security Agency CISA
Microsoft Security Blog
Microsoft Security Blog
博客园 - 【当耐特】
N
News and Events Feed by Topic
NISL@THU
NISL@THU
腾讯CDC
雷峰网
雷峰网
Security Latest
Security Latest
李成银的技术随笔
M
Microsoft Research Blog - Microsoft Research
L
LangChain Blog
L
Lohrmann on Cybersecurity
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
C
Check Point Blog
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
博客园 - Franky
N
News | PayPal Newsroom
V
V2EX
A
About on SuperTechFans
The Register - Security
The Register - Security
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google Online Security Blog
Google Online Security Blog
MyScale Blog
MyScale Blog
Cisco Talos Blog
Cisco Talos Blog
Vercel News
Vercel News
WordPress大学
WordPress大学
C
Cyber Attacks, Cyber Crime and Cyber Security
The Hacker News
The Hacker News
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
爱范儿
爱范儿
A
Arctic Wolf
L
LINUX DO - 最新话题
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

博客园 - 雪莉06

vue2 jeecgBoot keepalive 解决方案 vue中实现页面全屏和指定元素全屏 screenfull全屏组件的基本使用 网页导出EXCEL格式数据,长数字变为科学计数法的解决方法 dedecms织梦自定义表单导出到excel的方法 织梦dede:arclist按最新修改排序orderby=pubdate无效的解决方法 vue-router报错:Uncaught (in promise) NavigationDuplicated {_name: ‘NavigationDuplicated‘, name: ‘Navig nvm的安装和使用(转) elementUI 的 input无法输入bug解决 vue数字翻牌效果 j-modal的 slot="footer" 失效 v-if判断页脚按钮 帝国CMS后台登录空白怎么办?如何修改成https ES6两个数组进行比较 element ui form表单 表格下嵌套动态表格,新增行,删除行 vue 父子组件传值报错:this.$emit is not a function 解决 dede列表页调用二三级导航栏(转载) a-table 鼠标滑过显示小手,当前行可点击(转载) echarts折线图使用dataZoom,切换数据时渲染异常,出现竖线bug vue里面修改title样式
antd vue 树形表格
雪莉06 · 2026-03-23 · via 博客园 - 雪莉06

image

<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,

            },

          ],

        },

      ],