ant-design-vue 根据后端返的字段状态，累加计算总数据项，已填数据项和未填数据项

最新推荐文章于 2023-04-24 10:41:35 发布
最新推荐文章于 2023-04-24 10:41:35 发布
阅读量783 收藏
点赞数 1
分类专栏： antd-design-vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49668076/article/details/118021169
版权

近期的项目是用ant-design-vue框架
业务逻辑是从后端返回的接口中，有一个字段状态是null。通过编辑按钮输入内容后，null的状态改变。
此时要统计列表总数据项，已填数据项和未填数据项
在这里插入图片描述
在这里插入图片描述

直接上代码，模板区
在这里插入图片描述
在data中准备个对象
在这里插入图片描述
拿到数据之后，循环数组，判断条件的意思是这个值不为空，代表有内容，有内容就自加加。
总数据项用的是res.total,如果没有，可以用res.rows.length，就是数组的长度也可以拿来求总和
在这里插入图片描述

春晓_春眠花落
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant design for vue表格合计
wyl_gg的博客
07-01 2398
第一种方法，就是后端做数据处理，多返回一条数据；具体操作 地址：https://blog.csdn.net/qq_38215042/article/details/114627091?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162512406116780269845978%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&reques
Ant Design Vue实现表尾合计联动
Youaremysalvatio的博客
03-19 564
Ant Design Vue2以内官方没有表位合计联动的API，搜了一下，手写了个，基本满足需求。
使用ant-design-vue的button组件实现计数器
richest_qi的博客
06-16 1024
新建项目 本例使用的是vue3。 vue create demo Counter组件 // Counter.vue <template> <div>{{count}}</div> <a-button type="primary" @click="add" class="btn">加</a-button> <a-button type="primary" @click="sub" class="btn">.
vue-ant-design实现＜a-table＞表格行合并
后青春的诗
09-26 3063
// 动态计算需要合并的单元格的行 const temp = {}; // 当前重复的值,支持多列 const mergeCells = (text, array, columns) => { let i = 0; if (text !== temp[columns]) { temp[columns] = text; array.forEach((item) => { .
antdesign vue 表格动态合并（动态数据，纯前端）
weixin_43465396的博客
09-23 2220
antdesign vue ----table <template> <a-table :columns="columns" :data-source="data" bordered</a-table> </template> <script> // data为数据 const data = [ { projectName: "项目3", projectDetail: "业务招待费", individualAccount:
antdesignvue table底部增加合计行
qq_38687592的博客
04-24 1677
思路：用 footer API 通过设置 overflow：auto 使底部合计栏出现滚动条，然后通过控制一条滚动使另一条滚动条随之滚动即可。到表格里面去， 然后将表格的最后一个元素设置。思路：获取到合计的数据，将数据。
vue_ant-design-vue菜单递归
12-28
在Vue.js框架中，Ant Design Vue是一个非常流行的UI组件库，它提供了丰富的界面元素和设计模式，便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单（Menu）组件，特别是如何处理...
av-table是居于ant-design-vue（版本3.2.20） 的 a-table组件封装的虚拟列表组件.zip
最新发布
04-02
总的来说，av-table 是 Ant Design Vue 生态系统中的一个重要补充，它通过虚拟列表技术提升了大量数据渲染的性能。对于需要处理大量表格数据的 Vue.js 项目，av-table 是一个值得考虑的高效解决方案。
ant-design-vue按需加载的坑的解决
11-20
在Vue.js开发中，我们经常使用Ant Design Vue作为前端UI框架，它提供了丰富的组件和优雅的设计风格。然而，在实际开发过程中，我们可能会遇到一些技术挑战，例如按需加载（tree shaking）Ant Design Vue时出现的编译...
管理系统系列--vue+ant-design-vue创建后台管理系统模板.zip
02-25
例如，创建一个登录组件，可以使用ant-design-vue的Input组件实现输入框，Button组件实现登录按钮，同时利用Vue的数据绑定和计算属性来处理登录逻辑。 在布局方面，ant-design-vue提供了Grid系统，帮助开发者轻松...
vue与vue-i18n结合实现后台数据的多语言切换方法
01-19
在XXX.js文件中定义函数： getUser(context,info){ ... let err =data.body.error;... this.users = dataObj.items.map(function (e,i) { //遍历获取的数据，用this.$t()将每项数据与翻译资源对应 e.gen
ant design vue 实现table组件合计栏
青春正在燃烧的博客
07-23 4860
在table底部需要显示合计栏，主要实现方式：使用table底部插槽。 实现效果： 出现滚动条后，合计栏跟随table滚动 css样式修改: table和合计栏数据对其，合计栏隐藏滚动条 /deep/ .ant-table-footer { padding: 0; } /deep/ .ant-table-footer .ant-table-body { overflow: hidden !important; } /deep/ .ant-table-footer
Ant Design Vue中如何给Table添加合计行
weixin_43121907的博客
09-03 5072
直接上代码 1.设置Columns 如果是第一行就展示总计，其他的情况展示索引 代码如下（示例）： [ { title: '序号', dataIndex: 'index', customRender: ({ index }) => { if (index) { return index } else { return '总计' } } } ] 2
【Python百日进阶-Web开发-Feffery】Day371 - fac数据展示15：AntdStatistic统计数值
岳涛的博客
05-22 509
文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓十五、fac数据展示：AntdStatistic统计数值15.1 语法与参数15.1.1 语法15.1.2 主要参数说明15.2 使用示例15.2.1 基础使用15.2.2 添加前后缀额外内容15.2.3 自定义数值样式15.2.4 添加标题提示框15.2.5 回调示例 前言：fac是什么？ feffery-antd-components（简称fac），是国内大佬费弗里(Feffery)老
antd-vue 累加表单编辑和删除(完善版)
往事随风
12-12 666
antd-vue 表格自增
ant-design-vue table汇总行注意点
m0_51392380的博客
04-18 1916
参照官方文档总结行，<a-table-summary-row>与 <a-table-summary-cell>标签需引入才能使用，不引入样式无法生效。
vue3.0+antdesign2.0实现的简易多人账单计算器
cong_user的博客
03-23 311
简介 多人共同消费时可以帮助计算各自的开销 主要使用库：vue3.0，antdesign2.0 主要三步流程： 选人 选谁花费，谁参与 得出结果 应用场景 a,b,c,d 早上吃了生煎 a,b,c 中午吃了火锅 b,c,d 晚上吃了烧烤 要计算各自的开销 说明 名字不填或者相同时会去重 填完第二部返回第一步删除值会影响第二部的结果 代码优化中 应用截图 github地址 https://github.com/congyaqwq/account ...
vue-cropper + ant-design-vue 实现裁剪图片并上传到服务器
kinding的博客
07-04 6830
需求： 上传的图片要进行裁切或压缩到C端显示的格式与大小 主要应用于PC端的后管 涉及到新增过程 与图片回显（修改） 思路： 点击上传，从本地选择图片文件 选择文件夹后进入模态框（将选择的图片塞入模态框） 模态框作为裁剪图片的容器 进行裁剪 获取裁剪后的结果 并将裁剪后的图片对象返回给父组件 父组件获取到裁剪后的图片文件 进行上传 成功后将图片回显 修改过程： 将后端数据回显到图...
Ant-design 源码分析之技术说明综述
qq_37588125的博客
09-30 541
Ant-design 源码分析之数据展示（一） 2021SC@SDUSC Ant Design of React 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 由于Antd是UI组件库，所以我们小组主要分析关键代码为组件代码，我负责数据展示部分。 数据展示部分共有17个组件： Avatar头像 用来代表用户或事物，支持图片、图标或字符展示。 Badge徽标数 图标右上角的圆形徽标数字。 Comment评论 对网站内容的反馈、评价和讨论。 Collapse
ant-design-vue 表格校验
07-15
### 回答1： ...总的来说，ant-design-vue 提供了丰富的表格校验功能，可以通过配置校验规则和自定义校验函数来实现表格数据的校验。这样可以有效地提高数据的准确性和完整性，为用户提供更好的交互体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值