给antd的Table组件添加总计和平均值

前言

遇到一个需求，应该挺常见但是我却没怎么遇到，也费了不少功夫也解决，记录一下。

需求很简单，是个后台管理系统项目，要做个表格，（什么，这么简单，直接组件库里面复制一下Tabel不就完事了) 哈哈，起初我也是这么想的，项目用的是react + antd。所以是有现成的Table的。但是遇到的还稍微复杂一点，最下面两行是不同于其他的数据，看下图

所以难点就是：最后两行是自定义的，显示总计和评价值

实现思路

翻了一圈antd的文档，发现并没有自定义底部的配置，只有自定义表头，就在我准备放弃，跟产品说实现不了的时候，突然发现了Column的配置项里面的render属性，里面是这样介绍的：

生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并

额，咋一看好像也不符合，但是前面的几个字，生成复杂数据 ，好像有点搞头，冥想了一会后好像有点点思路了：

用index判断行数，再用key判断列数，这样在最后两行的时候根据当前的key值去手动渲染需要的数据。

代码

知道思路后挺简单的，就是在render函数里面做判断，看注释吧

 render() {const getColumns = () => {// columns比较长，这里就不贴出来了，注意每项要有个唯一标识keycolumns.map(column => {column.render = (text, record, index) =>{if(column.key === 'statDate') { // 第一列，因为第一列是固定的文案if(index === tableData.length - 2) { //倒数第二行return <strong>总计</strong>} else if(index === tableData.length - 1) { //倒数第一行return <strong>平均值</strong>}else  {return text}} else {if(index === tableData.length - 2) {return <strong>{这里写总计}</strong>} else if(index === tableData.length - 1) {return <strong>{这里写平均值}</strong>}  else  {return text}}}})return columns}}

总结

利用render函数的强大性，根据传参可以定位到具体的某一行，某一列，然后就可以自定义渲染内容了

还是那句话，遇事不用慌，首先查文档，哈哈。

可以定位到具体的某一行，某一列，然后就可以自定义渲染内容了

还是那句话，遇事不用慌，首先查文档，哈哈。

完事~

给antd的Table组件添加总计和平均值相关推荐

antd中table组件中如何进行换行操作（react中）
antd中table组件中如何进行换行操作(react中) 说明效果数据代码说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
antD的table组件，长度过长使用省略号表示
目录解决的问题一.antD是什么? 二.使用步骤 1.使用render里面的参数(text)进行长度判断 2.结果总结解决的问题 table组件中,如果一个内容长度大于5,则用省略号显示多余的 ...
html表格怎么插入照片,antd的Table组件如何插入图片
在项目中有一个需求是在Table组件中插入图片,但是Table有自己封装的语法,查了查资料才整出来,完整代码如下: import React, { Component } from 'react'; ...
【Antd】Table组件数据重新渲染后筛选项如何清空
先来说一下我遇到的场景: 如上图,在点击操作按钮之后,会重新请求列表数据,列表数据更新.这个时候如果我先筛选了Age列, 再点击操作按钮更新数据会发现,列表上渲染的数据是经过筛选之后的,筛选项并没有被 ...
iview给table组件添加自增序号
傻逼了,iview自带了自增序号,还是记录一下吧 template: <Table:columns="informationTable":data="informa ...
antd 下拉框怎么联动_Antd的Table组件嵌套Table以及选择框联动操作
一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行 ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
AntD02 Table组件的使用
1 前提准备 1.1 创建一个angular项目 1.2 将 Ant Design 整合到 Angular 项目中 1.3 官方文档点击前往 2 简单使用 <nz-table#rowSelec ...
Vue2 + ant design vue1.7.8版本 Table组件手动拖拽、可伸缩列功能
低版本的antd table组件官网文档上有可伸缩列功能,但是用起来有很明显的bug,无法直接拿来用:接下来给大家提供一个手写的拖拽方案: 1.首先,写好v-table组件,这里最重要的就是tabl ...

给antd的Table组件添加总计和平均值

前言

实现思路

代码

总结

给antd的Table组件添加总计和平均值相关推荐

最新文章

热门文章