本文内容参考And Design 具体API内容请参考 Ant Design
此部分内容为个人学习记录专用:
表头只支持列合并,使用 column 里的 colSpan 进行设置。
表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。
这句话 是来自And Design Table中关于表格行/列合并 内容。
废话先不说 先上效果图:
我们想实现的内容 是对数据的列进行合并,因为有很多数据都是相同的 比如说我效果图中的省份,直属台等信息。
在查找Antd API与效果图中我们知道,要想实现这样的效果,我们需要对Table表头进行处理,rowSpan(对应行 主要 处理使用) **colSpan(对应列) **
后端返回的数据是我们使用的常规数据 我们主要是在前端进行处理
先看下我们表头
columns = [
{
title: '直属台',
dataIndex: 'ZHISHUTAI',
key: 'ZHISHUTAI',
render: (text, row, index) => {
return {
children: text,
props: {
rowSpan: row['ZHISHUTAI&rowSpan'],
}
}
},
},
这里 我们要知道 rowSpan的作用是告诉Table中表格数据那些行合并
rowSpan中对应的是我们行的数据 如rowSpan:5 就代表5行进行合并 而0 表示不渲染(具体可看Antd 中文官网)
ZHISHUTAI&rowSpan 是我们将后台数据进行处理后的结果,比如说 我50条数据中,前10条是 直属台的同名字字段 例如:291台,这时候 我们就要自己计算出 291台有几个(因为计算机不知道 所以要通过JS去算出具体数据,然后重新拼装在JSON的数据中去,在这部分中进行调用。)
这时候 我们在通过这个字段将对应的rowSpan给确定下俩。涉及一个知识点 关于对象的引用 对象引用两种方式 “ . ” 点 与 “[]”中括号,一个表示确定静态的(确定内容的) 一个表示动态的(变量值) 而我们在判断对象是是否存在某一属性时 可以使用 in 属性或者是 hasOwnProperty 这两个属性。 一个延伸至继承属性(也就是原型上), 一个仅在自有属性 。 此部分了解即可 因为 我也不知道 干啥可以用到 毕竟 闲鱼。