Ant Design Vue Table 组件合并单元格

项目开发中，有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现。

<template><div><a-table bordered :data-source="dataSource" :columns="columns"></a-table></div>
</template>
<script>
const dataSource = [{ key: '1', school: '林州一中', grade: '高一', class: '二班', name: '徐强' },{ key: '2', school: '林州一中', grade: '高一', class: '一班', name: '林东'},{ key: '3', school: '林州一中', grade: '高一', class: '二班', name: '李丹'},{ key: '4', school: '林州一中', grade: '高二', class: '二班', name: '刘康'},{ key: '5', school: '实验高中', grade: '高三', class: '二班', name: '杨江'},{ key: '6', school: '实验高中', grade: '高三', class: '一班', name: '陈锋'},{ key: '7', school: '实验高中', grade: '高三', class: '二班', name: '李华'},{ key: '8', school: '实验高中', grade: '高四', class: '二班', name: '赵铭'}
]const columns = [{title: '学校', dataIndex: 'school', width: '25%',scopedSlots: { customRender: 'school' }, align: 'center', key: 'school',customRender (_, row) {return {children: row.school,attrs: {rowSpan: row.schoolRowSpan}}}},{title: '年级', dataIndex: 'grade', width: '25%',scopedSlots: { customRender: 'grade' }, align: 'center', key: 'grade',customRender (_, row) {return {children: row.grade,attrs: {rowSpan: row.gradeRowSpan}}}},{title: '班级', dataIndex: 'class', width: '25%',scopedSlots: { customRender: 'class' }, align: 'center'},{title: '姓名', dataIndex: 'name', width: '25%',scopedSlots: { customRender: 'name' }, align: 'center'}
]export default {name: 'TableMerge',data () {return {dataSource,columns}},methods: {// 合并单元格rowSpan (key, data) {const arr = data.reduce((result, item) => {if (result.indexOf(item[key]) < 0) {result.push(item[key])}return result}, []).reduce((result, keys) => {const children = data.filter(item => item[key] === keys)result = result.concat(children.map((item, index) => ({...item,[`${key}RowSpan`]: index === 0 ? children.length : 0})))return result}, [])return arr},// 表格合并mergeRowCell (data) {let tableData = this.rowSpan('school', data)tableData = this.rowSpan('grade', tableData)this.dataSource = tableData}},mounted () {this.mergeRowCell(this.dataSource)}
}
</script>

合并前：

合并第一列：

合并第二列：

Ant Design Vue Table 组件合并单元格相关推荐

html table 合并单元格分页,element table组件合并单元格
合并单元格,如果situation 一致,则合并 getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组:spanArr是一个空的数组,用于存放每一行记录的合并数:po ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
ant design vue table分页
ant design vue table分页设置 1.设置pagination <a-table :columns="columns" :dataSource="d ...
vue el-table的合并单元格与拆分单元格
vue el-table的合并单元格与拆分单元格 methods: {objectSpanMethod({ row, column, rowIndex, columnIndex }) {const f ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
Ant table表格合并单元格使用
Ant 合并单元格+覆盖样式项目需求: 最后一列用来展示详情,表格左侧点击行切换:要求选中行的样式和详情信息用一个边框凸显出来结果如下: 切换效果展示如下: 实现过程: 在ant合并单元格demo ...
HTML5 table表格合并单元格和合并边框
原文地址和代码: 原文地址转载请备注代码: <!DOCTYPE html> <html lang="en"> <head><meta ...

Ant Design Vue Table 组件合并单元格

Ant Design Vue Table 组件合并单元格

Ant Design Vue Table 组件合并单元格相关推荐

最新文章

热门文章