Ant Design Vue实现表尾合计联动

已于 2023-03-19 16:26:53 修改
阅读量507 收藏 2
点赞数 1
文章标签： vue.js 前端 前端框架
于 2023-03-19 16:10:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youaremysalvatio/article/details/129651955
版权

Ant Design Vue2官方没有表位合计联动的API，搜了一下，手写了下，基本满足需求，如下图

1、表中添加footer属性

2、在methods添加方法渲染表尾

 3、填充数据

 注意：表尾合计表需要和主表的结构一样，且每个单元格都要给宽度，否则会出现对不齐的情况

4、监听滚动条滚动

5、隐藏表位footer中的表的滚动条

 到这里就可以啦

Youaremysalvatio
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant design for vue表格合计
wyl_gg的博客
07-01 2369
第一种方法，就是后端做数据处理，多返回一条数据；具体操作 地址：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
省市区3级联动数据ant design
09-07
省市区3级联动数据，包含港澳台下的市区，可用于 ant design 下的各个组件库
txt文件上传ant design vue表格以及对表格文件的分列，预览行数等联动效果
05-28
实现点击上传txt文件，将txt文件上传至ant design vue组件库的table表格上进行显示 第一个表格：用于展示文件以及对文件的显示操作 第二个表格：用于接收第一个表格的列数据
ant-design-vue table表格添加合计行(完美解决篇)
最新发布
by254484的博客
10-17 3597
ant-design-vue table表格添加合计行解决方案
vue antdesign table组件添加尾部合计行
ke_sin的博客
06-09 4782
vue + antdesign table组件添加尾部合计行
ant-design Table表格添加合计行
qq_38215042的博客
03-10 1万+
1：方式一 1：效果图 2：实现方式 在footer中渲染一个与原表一模一样的表结构，隐藏表头，我这里使用的时z-index层级结构，定位的方式，把footer表上移，把表头隐藏进上表的最后一行。原因：因为每行我都没给宽度，每行的宽度都是根据数据的长度自适应的。这也是showHeader={true}使用true的原因。 3：实现代码 // 1.在表添加footer属性 <a-table ref="table" size="middle" bord
vue-ant-design实现＜a-table＞表格行合并
后青春的诗
09-26 2972
// 动态计算需要合并的单元格的行 const temp = {}; // 当前重复的值,支持多列 const mergeCells = (text, array, columns) => { let i = 0; if (text !== temp[columns]) { temp[columns] = text; array.forEach((item) => { .
antdesignvue table底部增加合计行
qq_38687592的博客
04-24 1470
思路：用 footer API 通过设置 overflow：auto 使底部合计栏出现滚动条，然后通过控制一条滚动使另一条滚动条随之滚动即可。到表格里面去， 然后将表格的最后一个元素设置。思路：获取到合计的数据，将数据。
ant design vue 实现table组件合计栏
青春正在燃烧的博客
07-23 4777
在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 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
省市区三级联动-ant格式-全国数据
05-07
vue ant-design中使用的a-cascader 省市区三级联动 前端所使用的全国数据
Ant Design Vue中如何给Table添加合计行
weixin_43121907的博客
09-03 4908
直接上代码 1.设置Columns 如果是第一行就展示总计，其他的情况展示索引 代码如下（示例）： [ { title: '序号', dataIndex: 'index', customRender: ({ index }) => { if (index) { return index } else { return '总计' } } } ] 2
antdvue的table合计行
weixin_44368048的博客
11-09 5575
vue3+antdvue使用a-table合计行
ant-design-vue table 添加合计行
u010737799的博客
02-21 1323
ant-design-vue 添加合计行
基于antd-vue的table表格增加合计栏
qq_40567849的博客
02-15 4461
文章目录前言一、使用步骤1.首先在主表格内新增另外一个table2.读入数据总结 前言 需求：table表格增加合计栏 提示：以下仅是一种实现方法，下面案例可供参考 一、使用步骤 1.首先在主表格内新增另外一个table 代码如下（示例）： <a-table :columns="columns" :data-source="data"> <a-table ref="totalTable" :columns="totalColumns"
antdesign vue 表格动态合并（动态数据，纯前端）
weixin_43465396的博客
09-23 2167
antdesign vue ----table <template> <a-table :columns="columns" :data-source="data" bordered</a-table> </template> <script> // data为数据 const data = [ { projectName: "项目3", projectDetail: "业务招待费", individualAccount:
Ant Design Vue实现a-table表格单元格合并（列/行合并）
热门推荐
DOM曼珠沙华的博客
08-24 2万+
列合并 这里先写一个最简单的列合并实现： 这个合并的效果图只截了表格的一部分，左边是需要展示的数据。数据是后台返回的，但是最后的合计数据需要计算并合并展示。 实现代码如下： 表格数据： <a-table bordered :columns="columns" :data-source="data" :pagination="false" :loading="loading" rowKey="id"></a-table> 这里的data为后台返回数据，合并的话需要重点
ant-design-vue 根据后端返的字段状态，累加计算总数据项，已填数据项和未填数据项
花椒和蕊的博客
06-18 763
近期的项目是用ant-design-vue框架 业务逻辑是从后端返回的接口中，有一个字段状态是null。通过编辑按钮输入内容后，null的状态改变。 此时要统计列表总数据项，已填数据项和未填数据项 直接上代码，模板区 在data中准备个对象 拿到数据之后，循环数组，判断条件的意思是这个值不为空，代表有内容，有内容就自加加。 总数据项用的是res.total,如果没有，可以用res.rows.length，就是数组的长度也可以拿来求总和 ...
ant-design-vue的table表格行合并和列合并
weixin_43828487的博客
12-07 6973
ant-design-vue的表格行、列合并
ant design vue 实现级联动态加载选项
05-17
Ant Design Vue提供了一个`Cascader`级联选择器组件，可以用于实现级联动态加载选项的功能。以下是一个简单的示例： ```html <template> <a-cascader v-model="selectedOptions" :options="options" :load-data="loadData"></a-cascader> </template> <script> export default { data() { return { selectedOptions: [], options: [ { value: 'beijing', label: '北京市', children: [] }, { value: 'shanghai', label: '上海市', children: [] }, { value: 'guangzhou', label: '广州市', children: [] } ] } }, methods: { loadData(selectedOptions) { const targetOption = selectedOptions[selectedOptions.length - 1]; targetOption.loading = true; // 模拟异步加载数据 setTimeout(() => { targetOption.loading = false; targetOption.children = [ { value: `${targetOption.value}-1`, label: `${targetOption.label}-1` }, { value: `${targetOption.value}-2`, label: `${targetOption.label}-2` } ]; }, 1000); } } } </script> ``` 在上面的示例中，我们首先定义了一个`Cascader`组件，并将`options`属性设置为我们的级联选项。然后，我们在`loadData`方法中模拟了异步加载数据的过程，并将加载到的子选项设置为目标选项的`children`属性。当用户选择一个选项时，`loadData`方法将会被调用，并将当前选中的选项传递给它。我们可以利用这些信息来动态加载子选项。 需要注意的是，我们在`targetOption`对象上设置了`loading`属性，以便在数据加载时显示加载状态。当数据加载完成后，我们将其设置为`false`，以便隐藏加载状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值